3_jQuery实现ajax的其他写法

最新推荐文章于 2024-08-08 10:15:51 发布

BookerABC

最新推荐文章于 2024-08-08 10:15:51 发布

阅读量66

点赞数

分类专栏： Ajax 文章标签： jquery ajax servlet

本文链接：https://blog.csdn.net/booker009/article/details/128572202

版权

Ajax 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery实现AJAX的其他写法

4.3.1 $.load()

jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式,

语法为:

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

参数的含义为:

url: URL地址

 
data:待发送参数。

 
callback:载入成功时回调函数。

测试代码

准备第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        function testLoad(){
            //$("#d1").load("servlet2.do","username=aaa&password=bbb",function(){alert("响应结束")})
            $("#d1").load("loadPage.html #a")
        }
    </script>
</head>
<body>
<div id="d1" style="width: 100px;height: 100px;border: 1px solid black">
</div>
<input type="button" value="测试" onclick="testLoad()">
</body>
</html>

第二个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="a">
    <li>JAVA</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>Mysql</li>
    <li>python</li>
</div>
</body>
</html>

后台代码

package com.msb.servlet;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.msb.pojo.Student;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
/**
 * @Author: Ma HaiYang
 * @Description: MircoMessage:Mark_7001
 */
@WebServlet("/servlet2.do")
public class Servlet2 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        resp.setContentType("text/html;charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().print("<h1>hello</h1>");
    }
}

4.3.1 $.get()

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

语法为:


 
$.get(url,[data],[callback],[type])

参数的含义为:

url: URL地址

data:待发送参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default

该函数是简写的 Ajax 函数，等价于：

$.ajax({

 type:   'GET',
  url: url,

 
  data: data,

 
  success: success,

 
  dataType: dataType

 
});

4.3.1 $.getJSON()

JSON是一种较为理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的ajax()函数的一个简化版本。语法为:

$.getJSON(

 
      url,             //请求URL

 
      [data],          //传参，可选参数

 
      [callback]       //回调函数，可选参数

 
   　);

该函数是简写的 Ajax 函数，等价于：

$.ajax({

 
  url: url,

 
  data: data,

 
  success: callback,

 
  dataType: json

 
});

仅仅是等效于上述函数,但是除此之外这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写成"myurl?callback=X"这种格式，让程序执行回调函数X。

注意:$.getJSON是以GET方式提交数据，如果需要提交很大的数据量，可选$.post

$.post()

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

语法为:


 
$.post(url,[data],[callback],[type])

参数的含义为:

url: URL地址

 
data:待发送参数。

 
callback:载入成功时回调函数。

 
type:返回内容格式，xml, html, script, json, text, _default

该函数是简写的 Ajax 函数，等价于：

$.ajax({

 
  type:   'POST',

 
  url: url,

 
  data: data,

 
  success: success,

 
  dataType: dataType

 
});

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        function testAjax(){
            $.get(
                "servlet1.do",
                {"username":"zhangsan","password":"123456"},
                function(list){
                    $.each(list,function(i,e){
                        console.log(e)
                    })
                 },
                "json")
            console.log("------------------------------")
            $.getJSON(
                "servlet1.do",
                {"username":"zhangsan","password":"123456"},
                function(list){
                    $.each(list,function(i,e){
                        console.log(e)
                    })
                })
            console.log("------------------------------")
            $.post(
                "servlet1.do",
                {"username":"zhangsan","password":"123456"},
                function(list){
                    $.each(list,function(i,e){
                        console.log(e)
                    })
                },
                "json")
        }
    </script>
</head>
<body>
<input type="button" value="测试" onclick="testAjax()">
</body>
</html>

后端代码

package com.msb.servlet;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.msb.pojo.Student;
import sun.util.calendar.LocalGregorianCalendar;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
/**
 * @Author: Ma HaiYang
 * @Description: MircoMessage:Mark_7001
 */
@WebServlet("/servlet1.do")
public class Servlet1 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        Student stu1=new Student("小黑","男",10,new Date());
        Student stu2=new Student("小白","男",10,new Date());
        Student stu3=new Student("小黄","男",10,new Date());
        Student stu4=new Student("小花","男",10,new Date());
        ArrayList<Student> list =new ArrayList<>();
        Collections.addAll(list,stu1,stu2,stu3,stu4);
        GsonBuilder gb =new GsonBuilder();
        gb.setDateFormat("yyyy-MM-dd");
        Gson gson = gb.create();
        String json = gson.toJson(list);
        resp.setContentType("text/html;charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().print(json);
    }
}

BookerABC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3_jQuery实现ajax的其他写法

至于jQuery的getJSON()函数，只是设置了JSON参数的ajax()函数的一个简化版本。仅仅是等效于上述函数,但是除此之外这个函数也是可以跨域使用的，相比get()、post()有一定优势。jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。如果需要在出错时执行函数，请使用$.ajax。注意:$.getJSON是以GET方式提交数据，如果需要提交很大的数据量，可选$.post。callback:载入成功时回调函数。
复制链接

扫一扫

专栏目录