第8讲：$.ajax方法使用详解

jQuery对象上面定义了Ajax方法（$.ajax()），用来处理Ajax操作。调用该方法后，浏览器就会向服务器发出一个HTTP请求。ajax方法有很多属性，但并非每次调用都要使用所有属性，本讲详细介绍了每个属性的作用，并给出具体的调用案例，分别从服务器返回文本格式数据，JSON格式数据及xml格式数据。

$.ajax方法使用规范

$.ajax()方法常用参数列表

属性名称	说明
type	设置请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
async	设置是否异步，默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
url	发送请求的地址

data	请求到服务器的参数，将自动转换为请求字符串格式，格式：{参数名1:值1,参数名2:值2.....}
success	要求为Function类型的参数，请求成功后调用的回调函数，格式：function(data[, textStatus]){} ，data：由服务器返回，并根据dataType参数进行处理后的数据，textStatus描述状态的字符串，可以省略。
error	要求为Function类型的参数，请求失败时被调用的函数。function(){alert('服务器异常!')}
dataType	预期服务器返回的数据类型。可选值为：text,json,xml,html,script,jsonp
complete	要求为Function类型的参数，请求完成后调用的回调函数（无论请求成功或失败时均调用）。

ajax方法有很多属性，但并不是每次调用都需要使用，根据情况使用部分参数即可

具体案例演示

前端代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery中ajax支持应用</title>
    <!--加载JQuery库-->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function send(){
            var userName = $("#userName").val();
            console.log("userName=" + userName);
            var url = "/ajaxProj/t4AjaxServlet"
            $.ajax({
                type:'post',    //post或者get
                async:true,     //异步为true,同步为false
                url: url,
                //需要提交到后台的参数，键值对格式，多个参数逗号分隔
                data:{
                    userName:userName,
                    id:1,
                    age:15,
                    action:'text'
                },
                success:function (data){
                    //响应成功执行该函数
                    console.log("执行成功:"+data);
                    $("#fonts").text(data);
                },
                error:function (data){
                    //响应失败执行该函数，比如404,500,405等
                    console.log("执行失败：" + data);

                },complete:function(){
                    //不管执行成功，还是执行失败，最后都会执行
                    console.log("执行结束");
                },
                dataType:"text"
            });
        }
        function sendJson(){
            var userName = $("#userName").val();
            console.log("userName=" + userName);
            var url = "/ajaxProj/t4AjaxServlet"
            $.ajax({
                type:'post',    //post或者get
                async:true,     //异步为true,同步为false
                url: url,
                //需要提交到后台的参数，键值对格式，多个参数逗号分隔
                data:{
                    userName:userName,
                    id:1,
                    age:15,
                    action:'json'
                },
                success:function (data){
                    //响应成功执行该函数
                    console.log("执行成功:"+data);
                    var li = "<table>"
                    li += "<tr><td align='right'>id：</td><td>"+data.id+"</td></tr>"
                    li += "<tr><td align='right'>用户名称：</td><td>"+data.userName+"</td></tr>"
                    li += "<tr><td align='right'>用户年龄：</td><td>"+data.age+"</td></tr>"
                    li += "</table>";
                    $("#fonts").html(li);
                },
                error:function (data){
                    //响应失败执行该函数，比如404,500,405等
                    console.log("执行失败：" + data);

                },complete:function(){
                    //不管执行成功，还是执行失败，最后都会执行
                    console.log("执行结束");
                },
                dataType:"json"
            });
        }
        function sendXml(){
            var userName = $("#userName").val();
            console.log("userName=" + userName);
            var url = "/ajaxProj/t4AjaxServlet"
            $.ajax({
                type:'post',    //post或者get
                async:true,     //异步为true,同步为false
                url: url,
                //需要提交到后台的参数，键值对格式，多个参数逗号分隔
                data:{
                    userName:userName,
                    id:1,
                    age:15,
                    action:'xml'
                },
                success:function (data){
                    //响应成功执行该函数
                    console.log("执行成功:"+data);
                    let membersData = data.getElementsByTagName("person");
                    console.log(membersData);
                    let id = membersData[0].childNodes[0].firstChild.nodeValue;
                    let userName = membersData[0].childNodes[1].firstChild.nodeValue;
                    let age = membersData[0].childNodes[2].firstChild.nodeValue;
                    let li = "<table>"
                    li += "<tr><td align='right'>id：</td><td>"+id+"</td></tr>"
                    li += "<tr><td align='right'>用户名称：</td><td>"+userName+"</td></tr>"
                    li += "<tr><td align='right'>用户年龄：</td><td>"+age+"</td></tr>"
                    li += "</table>";
                    $("#fonts").html(li);
                },
                error:function (data){
                    //响应失败执行该函数，比如404,500,405等
                    console.log("执行失败：" + data);

                },complete:function(){
                    //不管执行成功，还是执行失败，最后都会执行
                    console.log("执行结束");
                },
                dataType:"xml"
            });
        }
    </script>
</head>
<body>
    <h2 align="center">JQuery中ajax支持应用</h2>
    <hr>
    用户名：<input type="text" name="userName" id="userName">
    <input type="button" value="返回文本内容" onclick="send()">
    <input type="button" value="返回json内容" onclick="sendJson()">
    <input type="button" value="返回xml内容" onclick="sendXml()">
    <hr>
    服务器返回的结果：<font id="fonts" color="red" size="2"></font>
</body>
</html>

后端代码如下：

package com.servlet;

import com.alibaba.fastjson.JSONObject;

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.io.PrintWriter;

@WebServlet(name = "T4AjaxServlet",value = "/t4AjaxServlet")
public class T4AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //获取返回的值
        String action = request.getParameter("action");
        String userName = request.getParameter("userName");
        String id = request.getParameter("id");
        String age = request.getParameter("age");
        System.out.println("userName=" + userName + ",id=" + id + ",age=" + age);
        //输出
        if(action.equals("text")) {
            out.println("返回结果：userName=" + userName);
        }else if(action.equals("json")){
            //字符串类型的值必须用双引号，如果是数值类型可以省略双引号
            //String msg ="{\"userName\":\"" +userName+ "\",\"id\":\"" + id + "\",\"age\":" + age + "}";
            //System.out.println(msg);
            //out.println(msg);
            //用fastjson包的类实现
            JSONObject person = new JSONObject();
            person.put("id",id);
            person.put("userName",userName);
            person.put("age",age);
            out.println(person.toJSONString());

        }else if(action.equals("xml")){
            StringBuffer sb = new StringBuffer();
            sb.append("<persons>");
            sb.append("<person><id>"+id+"</id><userName>"+userName+"</userName><age>"+age+"</age></person>");
            sb.append("</persons>");
            out.println("<?xml version='1.0' encoding='utf-8' ?>");
            out.println(sb.toString());
        }
    }

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


    }
}

运行效果

ajax方法还有一些简便写法。

$.get()：发出GET请求。
$.getScript()：读取一个JavaScript脚本文件并执行。
$.getJSON()：发出GET请求，读取一个JSON文件。
$.post()：发出POST请求。
$.fn.load()：读取一个html文件，并将其放入当前元素之中。

$.post方法参考

            //调用JQuery的post方法提交数据
            let url = "/ajaxProj/collegeServlet"
            $.post(
                url,
                {
                    参数1:值1,
                    参数2:值2,
                    参数3:值3
                },
                function (data){
                    //执行成功返回的结果
                    console.log(data);
                },
                "json"
            );

本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂

讲师课堂链接：https://edu.csdn.net/lecturer/893

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/31449.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！