jQuery实现Ajax的几种方式

最新推荐文章于 2024-07-15 22:52:27 发布

iuyou️

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量373

点赞数 1

分类专栏： jQuery 文章标签： ajax java html js json

本文链接：https://blog.csdn.net/qq_42219004/article/details/105479405

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Ajax

异步刷新：如果网页中某一个地方需要修改，异步刷新可以使：只刷新该需要修改的地方，而页面中其他地方保持不变。例如：百度搜索框、视频的点赞。

定义一个jsp页面，前端输入一个名字，jquery调用servlet进行查询，将查询的结果返回页面进行响应。

ajax ，get，post
jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"> 
        function register(){
            var $name = $("#name").val();
            /************************ajax*****************************/
            $.ajax({
                url:"/queryUser",
                options:"post",
                data:"name="+$name,
                success:function (msg) {
                    if (msg == "true"){
                        alert("查询成功");
                    }else {
                        alert("查询失败");
                    }
                },
                error:function () {
                    alert("系统异常！");
                }
            })
            /************************post*****************************/
            /*get与post类似*/
           $.post({
                url:"/queryUser",
                data:"name="+$name,
                success:function (msg) {
                    if (msg == "true"){
                        alert("查询成功");
                    }else {
                        alert("查询失败");
                    }
                }
            }) 
    </script>
</head>
<body>
    姓名：<input id="name"/><br/>
    查询：<input type="submit" onclick="register()"><br/>
</body>
</html>

servlet:


@WebServlet( "/queryUser")
public class ajax extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        PrintWriter writer = response.getWriter(); 
        if ("root".equals(name)){
            writer.write("true"); 
         }else {
            writer.write("false"); 
        }
 }

2.getJSON

json的基本使用，key/value键值对形式。

 /*定义一个json*/
 var student = {"name":"zs","age":20};
 alert(student.name+"---->"+student.age);
 /*定义一个json数组，中括号[]括起来*/
 var students =[{"name":"zs","age":20}, {"name":"ls","age":22}];
 alert(students[0].name+"--->"+students[0].age);
 alert(students[1].name+"--->"+students[1].age);

jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script type="text/javascript"> 
        function register(){
           var $name = $("#name").val(); 
           $.getJSON({
               url:"queryUser",
               //这里的data是以json的形式进行传递，非常便于传递参数
               data:{"name":$name},
               success:function (msg) { 
               		//返回的是一个json数据，key/value
                    if (msg.msg == "true"){
                        alert("查询成功");
                    }else {
                        alert("查询失败");
                    }
               }
           });
        }
    </script>
</head>
<body>
    姓名：<input id="name"/><br/>
    查询：<input type="submit" onclick="register()"><br/>
</body>
</html>

servlet：


@WebServlet( "/queryUser")
public class ajax extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        PrintWriter writer = response.getWriter();
		//给浏览器响应的是一个json数据
        String json= "{\"msg\": \"true\"}";
        String json1= "{\"msg\": \"false\"}"; 
        if ("root".equals(name)){ 
            writer.write(json);
         }else { 
            writer.write(json1);
        }
    } 
}