kendo ui for jquery中的scheduler如何在后端调用 jquery如何调用后端方法

前言：

前面学了基础的ajax感觉繁琐的真的就只想粘贴复制一键到位，本想着实现一个省市二级联动的功能，google了一下代码，真的是跟裹脚布一样又臭又长，就光那提取元素数据，创建元素，添加数据就看的烦人。
还好之前学过jquery，知道它是可以完美地封装javascript的操作，果然嘿真简单。
本来三十来行的创建ajax连接获取后台数据，就给我一行代码压缩，真的是越发展越简单。

注意下：

GET可能得到的是缓存数据
POST每次都随着请求提交到后台，所以没有数据残留浏览器

GET一般都是得到txt之类的文本数据，是单方面的
而POST是为了提交数据到后台进行交互操作，是双方面的

要使用Jquery首先得加载它：

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

Jquery一般有四种方式的ajax：

第一种：load，从服务器加载数据，并把返回的数据放入被选元素中

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton").click(function(){
        $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                alert("成功");
            }
            if(statusTxt=="error"){
                alert("失败："+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
</script>

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，  
加载到指定的 <div> 元素中：
实例：
$("#div1").load("demo_test.txt #p1");

第二种：GET方式：

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",null,function(data,status){   
            alert(data+":"+status);
        });
    });
});
</script>

第三种：POST方式：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/Json/JsonServlet", {
                name:"我是谁",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>

POST要和后台Servlet交互：

response.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));
        response.getWriter().println("你找到我了");

后台输出：

我是谁
12

要访问后台servlet也可以直接如此写地址：

$.get("JsonServlet",

第四种：getJSON方式：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是谁",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });
</script>

返回的就直接是json格式的对象，无需JSON.parse的方法转换。

注意：不管是哪种方式后台都有两种方式和前台交互：

第一种后台交互：直接拼接字符串。

response.getWriter().  
print("{\"name\":\"爱你\",\"age\":12}");

第二种 传入JSON对象：

JSONObject jsonObject =  
new JSONObject("{'name':'爱你','age':12}");
response.getWriter().print(jsonObject);

相同的最终传递给前台的时候都默认以字符串的形式传递过去，
注意的是除了getJSON方式 前台可以使用两种方式来将字符串转换成js对象：

1. eval（）函数  ：不推荐，有隐患 会执行其他js操作
2. JSON.parse（）函数 ：推荐：只执行对象转换操作

你们是不是还要问 不是有五种吗 为啥子前面就讲了四种？

没错 还有一种：

第五种：jQuery.ajax()：

执行异步 HTTP (Ajax) 请求

该方法是 jQuery 底层 AJAX 实现，所有的 jQuery AJAX 方法都使用 ajax() 方法。 。简单易用的高层实现见 .get, . g e t , .post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
可以这么理解：
前四种是高级方法，是对ajax（）进行了封装，更加简洁。可以理解为Jquery和JavaScript之间的关系。
$.ajax的一般格式

$.ajax({

 type: 'POST',

 url: url ,

data: data ,

success: success ,

dataType: dataType

});

$.ajax的参数描述

参数 描述
url 必需。规定把请求发送到哪个 URL。
data    可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)    可选。请求成功时执行的回调函数。
dataType    
可选。规定预期的服务器响应的数据类型。

默认执行智能判断（xml、json、script 或 html）。

举例：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.ajax({
                url : "/Json/JsonServlet",
                type : "POST",
                async : true,
                dataType : "json",
                data : {
                    name : "前台数据",
                    age : 12
                },
                success : function(result) {
                    $("#mydiv").html(result.name);
                },
                error : function(xhr) {
                    alert("错误提示： " + xhr.status + " " + xhr.statusText);
                }
            });
        });
    });
</script>

后台：

request.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));

后台输出：

前台数据
12

注意：
data还可以用字符串拼接：一样的效果 多个参数中间要用&分割

data : "name=前台数据string&age=12",

那什么时候使用呢？

$.post、$.get是一些简单的方法，  
如果要处理复杂的逻辑，还是需要用到jQuery.ajax()

该方法通常用于其他方法不能完成的请求，比如网址错误。

如果是表单提交的 可以参照我开头最后一个链接

三、区别

• GET - 从指定的资源请求数据，发送至服务器的key/value数据会作为QueryString附加到请求URL中,服务器返回数据的格式其实是字符串形式，并不是我们想要的json数据格式
• POST - 向指定的资源提交要处理的数据,这个函数跟.get()参数差不多，多了一个type参数，type为返回的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和 .get()返回的格式一样，都是字符串的
• getJSON-使用 AJAX 请求来获得 JSON 数据,使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的
  ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式，让程序执行回调函数X。
• ajax()-$.ajax()
  返回其创建的 XMLHttpRequest 对象

最后一种方式是依附于表单：表单的局部刷新
序列化表单方法：
serialize():将表单内容序列化成一个字符串。

serializeArray()：将表单内容序列化成一个对象数组

这里只介绍：serialize()
看script：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            //var frm=$("#form1").serializeArray();
            var frm = $("#form1");
            $.ajax({
                url : frm.attr("action"),
                type : frm.attr("method"),
                async : true,
                data : frm.serialize(),
                //var data=$("#form1").serializeArray();

                success : function(data) {
                    alert("ok");
                },
                error : function(data) {
                    alert(data.status);
                }
            });
        });
    });
</script>

form表单：

<form id="form1"
        action="${pageContext.request.contextPath}/ClassServlet" method="POST">
        <input type="text" name="name" /> <input type="password"
            name="password" /> <input type="button" id="mybutton" value="点我" />
    </form>

注意：
使用：serialize()

这时表单的按钮的type不可以是submit，否则自提交数据，  
也就是自动刷新； 用Ajax的serialize()提交表单，  
如果input的type为submit，提交时就会自动刷新，  
所以，用serialize()提交表单的时候最好把type改为button.