04. JQuery Ajax 与 PHP，JSP实例

JQuery Ajax

JQuery 对 JavaScript支持的AJAX进行的了进一步的封装，使得AJAX的调用与浏览器平台无关，使得AJAX的调用更加简单；

JQuery 提供的主要底层接口如下：

$.ajax()	执行一个异步的HTTP（Ajax）的请求。
$.ajaxSetup()	为以后要用到的Ajax请求设置默认的值

JQuery  提供的主要创建Ajax的快捷方法，这些方法是$.ajax 的快捷实现：

load()	从服务器加载数据，并把返回的数据放入被选元素中
$.get()	通过 HTTP GET 请求从服务器上请求数据
$.post()	通过 HTTP POST 请求从服务器上请求数据

对于一般的Ajax应用，一般会优先使用POST的方式与服务器后端进行交互，以提高输出传输的安全性（毕竟POST比GET参数明文直接添加到URL安全性要高一些）；

对于 JQuery Ajax API结构的详细说明，见： http://www.jquery123.com/category/ajax/

---

load() 方法

 load() 方法从服务器加载数据，并把返回的数据放入被选元素中；

1

$(selector).load(URL[,data[,callback]]); 

URL 参数：规定加载的服务器文件的 URL（必选）

data 参数：规定与请求一同发送的查询字符串键/值对集合（可选）

callback 参数： load() 方法完成后所执行的函数名称（可选）

以下示例：

Jquery加载服务器中的 test.txt 文件，该文件位于服务器Web应用的路径"/test.txt"；

服务器上的test.txt

1

<h2>Ajax test</h2>

2

<p id="p1">This is some for Ajax test</p>

前端的Jquery代码块

1

$("#div1").load("/test.txt");   //将test.txt的文件内容加载到 id="div1"的<div>块之中

2

$("#div1").load("/test.txt #p1")  //只加载test.txt文件的 id="p1"的内容到<div>块之中

callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt  ：包含调用成功时的结果内容

statusTXT  ：包含调用的状态

xhr  ：包含 XMLHttpRequest 对象

示例如下：

1

 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

2

    if(statusTxt=="success")

3

      alert("External content loaded successfully!");

4

    if(statusTxt=="error")

5

      alert("Error: "+xhr.status+": "+xhr.statusText);

6

  });

---

$.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据，Ajax 中的数据传输，一般是使用 POST 传输数据提高传输安全性；

1

$.post(URL,data,callback); 

URL 参数：规定您希望请求的 URL（必选）

data 参数：规定连同请求发送的数据（可选）

callback 参数：是请求成功后所执行的函数名（可选）

callback函数参数(data,status)，其中 data 返回的是一个字符串；

以下示例：

前端JQuery代码：

1

$.post("test.php",

2

  {

3

    name:"assad",

4

    age:"12"

5

  },

6

  function(data,status){

7

    alert("Data: " + data + "nStatus: " + status);

8

  });

后端PHP代码，test.php

1

 <?php

2

  $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';

3

  $age = isset($_POST['city']) ? htmlspecialchars($_POST['city']) : '';

4

  $message = $age >= 18 : "Welcome to the Site" : "You are under 18 ,please leave from this site :)"

5

  echo 'Hi ' . $name . ' '.$message;   

6

?>

---

$.ajax() 方法

$.ajax() 方法是完整版本的ajax调用，完整的调用参数参见： http://www.jquery123.com/jQuery.ajax/

以下一个携带常用参数的启动：

1

$.ajax(

2

    url:"/testJson",              //请求服务页URL

3

    type:"POST",                  //请求方式

4

    dataType:"json",              //数据类型

5

    data:{"name":"assad",         //数据内容

6

          "city":"guangzhou"

7

    },

8

    success:function(resData){     //请求成功后的回传函数

9

           ......

10

    },

11

    error:function(resData,status){   //请求异常的回传函数

12

           ......

13

    },

14

    traditionl:true,            //是否使用传统的序列化方式，在传输数组时要设置为 

15

    cache:true,

16

    timeout:30000

17

18

)；

19

​

---

JQuery Ajax 与 PHP，JSP之间的数据传输

使用 JQ uery Ajax 应用与 PHP,JSP 等后端进行数据交换时，实际传输数据的都是JSON格式的字符串；

对于 Ajax 应用的数据传输思路如下：

1、Jq 前端传输数据（键值对，数组，对象）给后端

将 Jq 前端待传输的数据（键值对，数组，对象）转化为相应的 Json 格式字符串，通过Ajax传输给后端，后端程序解析该字符串，将其转化为相应语言程序下的对象（键值对，数组，对象），再进行逻辑处理；

传递键值对，对象

对于  json字符串 ，假如直接传递键值对（传递对象也是将其转化为一系列的值域键值对），如下面格式：

1

var json = {name:"assad",age:"12"}； 

2

$.post("URL",json,function(resData,status){

3

    if(status == "success"){ ....... }

4

});

5

//此时json已经是一个创建的JS JSON对象，由于JS宽松的类型管理，其作为参数传输时会自动转化换为字符串

那么在PHP服务端获取到的POST变量如下:

1

$name = $_POST['name'];    // $name = "assad";

2

$age = $_POST['age'];      //$age = '12';

在Servlet中获取的POST变量如下：

1

String name = request.getParameter("name") //name = "assad";

2

String age = request.getParameter("age") //age = "12";

传递数组

如果json字符串传递数组，如下格式：

1

var array = ["assad","Jhon","Peter","Hera"];  

2

$.ajaxSetting.traditional = true;   //如果没有设置该选项，可能导致数组无法传递；

3

$.post("URL".{"array":array},function(resData,status){

4

    if(status == "success"){ ..... }

5

});

那么在PHP服务端获取到的POST变量如以下：

1

$array = $_POST['array'] ; 

2

// $array[0] = "assad";

3

// $array[1] = "Jhon"; ...

在 Servlet 中获取的POST变量如下：

1

String[] array = request.getParameterValues("array");

2

// array[0] = "assad";

3

// array[1] = "Jhon"; ...

2、后端传输数据（键值对，数组，对象）给 Jq前端

后端将数据（   键值对，数组，对象  ）转化为相应的  Json 格式字符串，通过Ajax传输给前端，Jq 前端解析该字符串，将其转化为JavaScript JSON对象，再对其进行数据渲染；

后端将对象，数组转化为JSON字符串，php和Servelet的方式见下面：
php 处理 json
java 处理json

之后将生成的数据回显就可以了；

前端Jq由JSON字符串生成JSON对象：

1

$.get("URL",function(resData,status){

2

   if(status == "success"){

3

       var json_object = JSON.parse(resData);

4

       //从json_object中获取数据，再进行页面渲染

5

       name = json_object.name;

6

       city = json_object.city;

7

   }

8

})

Javascript 处理 json
json语法

---

以下两个示例，分别演示JQuery Ajax 与 PHP，Java Servlet 配合使用，实现一个简易的实时显示投票数据；

JQuery 与 PHP 实例

前端代码

1

<!DOCTYPE html>

2

<html lang="en">

3

<head>

4

    <meta charset="UTF-8">

5

    <title>Ajax Test</title>

6

    <script src="jquery-3.1.min.js"></script>

7

    <script>

8

​

9

        $(document).ready(function(){

10

​

11

            //投票按钮触发时，进行投票数据刷新

12

            $(".vote").click(function(){

13

                var item =  $(this).val();

14

                var postData = { item : item };    //postData 采用键值对数组的形式储存

15

​

16

                $.post("./ajax.php",postData,function(resData,status){

17

                    if(status == "success"){

18

                        //返回的resData是一个Json格式的字符串

19

                        var jsonObj = $.parseJSON(resData);

20

                        $("#showA").text(jsonObj.A);

21

                        $("#showB").text(jsonObj.B);

22

                    }

23

                })

24

            });

25

            //每隔3s，刷新一次投票数据

26

            window.setInterval(function(){

27

                $.get("./ajax.php",function(resData,status){

28

                   if(status == "success"){

29

                       var jsonObj = $.parseJSON(resData);

30

                       $("#showA").text(jsonObj.A);

31

                       $("#showB").text(jsonObj.B);

32

                   }

33

                });

34

            },5000);

35

        });

36

    </script>

37

</head>

38

<body>

39

​

40

<h3>Vote</h3>

41

<button class="vote" value="A">vote A</button>

42

<button class="vote" value="B">vote B</button>

43

<h4>Now vote data</h4>

44

<div>

45

    <p>A —— <span id="showA">0</span></p>

46

    <p>B —— <span id="showB">0</span></p>

47

</div>

48

</body>

49

</html>

后端 ajax.php 代码

1

<?php

2

$voteItem = isset($_POST['item']) ? htmlspecialchars($_POST['item']) : '';

3

if($voteItem != ''){

4

    setVoteDataAccess($voteItem);   //setVoteDataAccess()方法数据库提交update操作，过程省略

5

}

6

$result = getVoteDataAccess();      //getVoteDataAccess()方法向数据库相应表提交select操作，返回一个包含结果数据的关联数组，过程省略

7

$votes = array(

8

    'A' => $result['A'],

9

    'B' => $result['B']

10

);

11

//将数据编码为json格式后发送

12

echo json_encode($votes);

13

?>

 

---

JQuery 与 JSP 实例

前端代码

1

<!DOCTYPE html>

2

<html lang="en">

3

<head>

4

    <meta charset="UTF-8">

5

    <title>Ajax Test</title>

6

    <script src="jquery-3.1.min.js"></script>

7

    <script>

8

​

9

        $(document).ready(function(){

10

            //投票按钮触发时，进行投票数据刷新

11

            $(".vote").click(function(){

12

                var item =  $(this).val();

13

                var postData = { item : item };    //postData 采用键值对数组的形式储存

14

​

15

                $.post("ajax",postData,function(resData,status){

16

                    if(status == "success"){

17

                        //返回的resData是一个Json格式的字符串

18

                        var jsonObj = JSON.parse(resData);

19

                        $("#showA").text(jsonObj.a);

20

                        $("#showB").text(jsonObj.b);

21

                    }

22

                })

23

            });

24

            //每隔3s，刷新一次投票数据

25

            window.setInterval(function(){

26

                $.get("ajax",function(resData,status){

27

                    if(status == "success"){

28

                        var jsonObj = $.parseJSON(resData);

29

                        $("#showA").text(jsonObj.a);

30

                        $("#showB").text(jsonObj.b);

31

                    }

32

                });

33

            },3000);

34

        });

35

    </script>

36

</head>

37

<body>

38

​

39

<h3>Vote</h3>

40

<button class="vote" value="A">vote A</button>

41

<button class="vote" value="B">vote B</button>

42

<h4>Now vote data</h4>

43

<div>

44

    <p>A —— <span id="showA">0</span></p>

45

    <p>B —— <span id="showB">0</span></p>

46

</div>

47

</body>

48

</html>

后端 AjaxServlet.java 代码：这里直接实现为一个Servlet，当然也可以实现为一个JSP

需要导入的处理JSON的JAR包的下载地址： http://download.csdn.net/download/gaidandan/7335445

1

import net.sf.json.JSONObject;

2

import javax.servlet.ServletException;

3

import javax.servlet.annotation.WebServlet;

4

import javax.servlet.http.HttpServlet;

5

import javax.servlet.http.HttpServletRequest;

6

import javax.servlet.http.HttpServletResponse;

7

import java.io.IOException;

8

import java.io.PrintWriter;

9

​

10

@WebServlet(urlPatterns = {"/ajax"},asyncSupported = true)

11

public class AjaxServlet extends HttpServlet {

12

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{

13

​

14

        String voteItem = request.getParameter("item");

15

        if(!voteItem.isEmpty()){

16

           VoteModel.setVoteDataAccess(voteItem);   //VoteModel.setVoteDataAccess()方法数据库提交update操作,实现省略

17

        }

18

19

        //将储存数据的VoteBean对象，转化为JSONObject对象，以获取器Json格式字符串

20

        VoteBean bean = Model.getVoteDataAccess() ;  //VoteModel.setVoteDataAccess()方法数据库提交update操作,返回一个VoteBean对象，实现省略

21

        JSONObject beanJson = JSONObject.fromObject(bean);

22

​

23

        PrintWriter out = response.getWriter();

24

        out.print(beanJson.toString());

25

​

26

    }

27

​

28

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{

29

        VoteBean bean = Model.getVoteDataAccess() ;

30

        JSONObject beanJson = JSONObject.fromObject(bean);

31

​

32

        PrintWriter out = response.getWriter();

33

        out.print(beanJson.toString());

34

    }

35

}

VoteBean.java : 储存数据的JavaBean对象

1

public class VoteBean {

2

    private int a = 0;

3

    private int b = 0;

4

    public VoteBean(){}

5

    public VoteBean(int a,int b){

6

        this.a = a;

7

        this.b = b;

8

    }

9

    public int getA() {

10

        return a;

11

    }

12

    public int getB() {

13

        return b;

14

    }

15

    public void setA(int a) {

16

        a = a;

17

    }

18

    public void setB(int b) {

19

        b = b;

20

    }

21

}

22

​