使用jQuery实现异步操作

最新推荐文章于 2024-07-29 18:21:08 发布

~(｀・ω・´)~

最新推荐文章于 2024-07-29 18:21:08 发布

阅读量1.6k

点赞数 1

文章标签： MVC

本文链接：https://blog.csdn.net/qq_41960373/article/details/93517659

版权

1、使用jQuery实现异步操作，实现不刷新页面对数据进行处理，并且返回想要的数据到页面
首先要先引用一个js文件 jquery.js 文件
jsp页面代码如下：

	$.getJSON ('/ Meet520 /ajax.action?id ='+id,  //此处为请求访问的action 
      function(json)
{
    //json为后台返回的数据	
}
});

以上是前台代码，

以下是后台代码：

public void ajax() throws Exception{
     List meet = new Arraylist();
     meet.add(“520”);
     request.setCharacterEncoding("UTF-8");
     HttpServletResponse response = ServletActionContext.getResponse();
     response.setCharacterEncoding("UTF-8");
     JSONArray json = null;
     json = JSONArray.fromObject(meet);
     response.setContentType("text/html;charset=utf-8");
     response.getWriter().write(json.toString());
 }

这样meet数组中的值就会返回到前台页面。

2、说完了异步请求，在说一下，用异步来提交form表单。
要实现异步提交表单，在jquery.js 的基础上，还需要一个js文件。
Jquery.form.js
这两个js文件在网上很容易找的到的，引用完这两个JS文件后，jsp代码如下：

 $(function(){
        var options = {
            dataType : "json",  //代表返回的数据类型为json格式
            success : function(returnData) {
                //returnData 为返回的数据
            },
            error : function(returnData) {
                alert("报错了！！！");
            }
        };
        $('#form1').submit(function() {   //form1为form表单的ID值
            // 提交表单
            $(this).ajaxSubmit(options);
            // 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false
            return false;
        });
    });

<body>
 <form action="meet520.action" id ="form1" name="form1" method="post">
     <input type="submit" value="提交"/>
 </form>
</body>

//使用异步提交，按钮只能用submit，不能用button

以上是异步提交表单的前台代码，

以下是异步提交表单的后台代码：

Public void meet520() throws Exception {
    List meet = new ArrayList();
    List.add(“1234”);
    String ss = “560”;
    //以下为Json代码，为前台返回值的方法
    request.setCharacterEncoding("UTF-8");
    HttpServletResponse response = ServletActionContext.getResponse();
    response.setCharacterEncoding("UTF-8");
    Map<String,Object> mapJson =  new HashMap<String,Object>();
    mapJson.put("meet",meet);
    mapJson.put("ss",ss);

SuppressWarnings("unused")
    String itableStr = JSONArray.fromObject(mapJson).toString();
    System.out.println(itableStr);
    此语句能够打印出JSON格式

    JSONArray returnData = JSONArray.fromObject(mapJson);
    response.setContentType("text/html;charset=utf-8");
    response.getWriter().write(returnData.toString());
}

以上代码就是异步提交的所有代码。