hooyantsing's Blog

jQuery_AJAX_模板_AJAX_回调数据方法

字数统计: 542阅读时长: 2 min
2019/11/17

jQuery AJAX 模板

以下为JavaScript代码

模板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
    $(function() {
       $('#submit').click(
               function() {
                  var |id| =  document.getElementById("|id|").value;
                  $.ajax({
                      type : "GET",
                      url : "join.s",
                      data : {
                          'op' : 'reg',
                          '|id|' : |id|
                      },
                      dataType : "json",
                      success :  function(data) {
                          alert(data.msg);
                          $("#").text(data.msg);
                          $("#").value(data.msg);
                      }
                  });
               });
    });
</script>

解析:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
    $(function() {
       //点击监听事件
       $('#submit').click(
               //点击后做什么
               function() {
                  //获取标签id 中的value值 (通常在于<input>标签中)
                  var |id| =  document.getElementById("|id|").value;
                  //type (发送请求的类型) : GET/POST ,
                  //url  (后端地址) :
                  //date (json格式参数) : { key : value , key : value }
                  //dataType : json
                  //success : function(data) { //后台成功执行后返回数据 }
                  $.ajax({
                      type : "GET",
                      url : "join.s",
                      data : {
                          'op' : 'reg',
                          '|id|' : |id|
                      },
                      dataType : "json",
                      success :  function(data) {
                          alert(data.msg);
                          //$("#dlg").text(data.msg);
                      }
                  });
               });
    });
</script>

老师的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@page import="com.yc.lottery.util.DBUtil"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试页面</title>
<!-- 引入jqeury -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

<script type="text/javascript">
function add(){
    // jquery 封装好的 ajax 方法    以json对象作为参数对象
    // 构建参数 方式1
    var param = {};
    param.a = 100;
    param.b = 200;
    
    // 构建参数  方式2
    var param = { a:100, b:200};  // json 格式
    
    $.post("add.s",param,function(data){
        // 接受到服务器响应后的操作
        alert(data);
    })
}
</script>

</head>
<body>
<button onclick="add()">add</button>
</body>

**

**

AJAX 回调数据方法

1
2
3
4
5
6
//TODO:将状态传回前端
response.setContentType("application/json;charset=UTF-8");
//构建json格式
String json = " {\"msg\":\"" +  result + "\"} ";
PrintWriter out =  response.getWriter();
out.println(json);

使用gson包构建json格式数据

其中Result是JavaBean的实体类

1
2
3
4
Result result = Result.success("注册成功");
Gson gson = new Gson();
String json = gson.toJson(result);
response.getWriter().print(json);
CATALOG