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

这篇具有很好参考价值的文章主要介绍了第8讲:$.ajax方法使用详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

$.ajax方法使用规范

第8讲:$.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 {


    }
}
运行效果

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

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

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

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文章来源地址https://www.toymoban.com/news/detail-498874.html

到了这里,关于第8讲:$.ajax方法使用详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

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

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

    2024年02月10日
    浏览(30)
  • 第11讲:使用ajax技术实现文件上传功能(jQuery)

    软件项目开发过程中,文件上传功能是常用技术之一,经常需要上传文件过程中为了更好的体验,不允许刷新当前页面,这样就必须使用异步上传技术了,jQuery提供了异步上传的多种方法,下面跟大家一起探讨使用jQuery.form插件上传文件的功能,具体实现过程如下: 序号 资源

    2024年02月11日
    浏览(44)
  • 第10讲:使用ajax技术实现省市县三级联动(jQuery)

    多级联动是在软件开发中经常碰到的问题,本文章与大家探讨三级联动的技术,使用jQuery对ajax技术的支持,使用$.post方法实现省市县三级联动,后台使用jsp的servlet技术,MySQL数据库,fastjson封装json数据,具体实现如下: 序号 资源 说明 1 jQuery插件 ajax通讯基础 2 mysql数据库 存

    2024年02月11日
    浏览(43)
  • JS 之 事件Event对象详解(属性、方法、自定义事件)

    一、Event对象 1、简介 ​ 事件 event 对象是指在浏览器中触发事件时,浏览器会自动创建一个 event 对象,其中存储了本次事件相关的信息,包括事件类型、事件目标、触发元素等等。浏览器创建完 event 对象之后,会自动将该对象作为参数传递给绑定的事件处理函数,我们可以

    2024年02月09日
    浏览(68)
  • Jquery使用ajax的success回调函数不执行,但是能正常请求

            好久没有写代码了,今天使用 jq 的时候发现success回调函数怎么都不执行。         而且令人不解的是,后端居然都成功接收请求,一切正常。 看了网上很多回答,大概有这几点: 将dataType的值从json改为txt 将dataType属性删除 将error的回调函数补上 ... 我都试过了,最

    2024年02月10日
    浏览(44)
  • 第9讲:使用ajax技术实现增删改查及分页显示功能(jQuery)

    本讲内容首先讲解jQuery对ajax的支持,分别讲解$.post,$.get,$.ajax等方法,这些方法的参数,使用方法及区别。最后对ajax的综合应用举例:在同一个页面实现新增,修改,删除学校资料,分页列表等功能,前端使用html静态页面,使用MySQL数据库,后台使用servlet技术实现。 基础环

    2024年02月11日
    浏览(39)
  • 关于Jquery的Validate插件--rules添加自定义方法(强密码验证方法)

    链接: https://www.runoob.com/jquery/jquery-plugin-validate.html Query Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用

    2024年02月08日
    浏览(38)
  • 使用Collections.sort方法来对自定义对象进行排序

    Collections.sort方法可以用来对自定义对象进行排序。要实现这一点,需要在调用该方法时传入一个比较器,该比较器用于指定如何比较对象中的值。 举个例子,假设有一个自定义对象Person,其中包含姓名和年龄两个属性,我们可以使用以下代码对该对象列表进行按年龄排序:

    2024年02月13日
    浏览(46)
  • Ajax异步通信与XMLhttpRequest对象的属性方法及事件

    AJAX 的英文全称 Asynchronous JavaScript And XML,其中Asynchronous就是指的异步,这里异步指通过 AJAX 向服务器请求数据,在不刷新整个页面的情况下,更新页面上的部分内容。 通过使用Ajax,可以创建更动态和响应性的Web应用程序,因为它使得页面可以在后台与服务器进行数据交换,

    2024年03月14日
    浏览(46)
  • AJAX学习笔记6 JQuery对AJAX进行封装

    AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。  用JS发送AJAX请求回顾 响应结果一般是个字符串

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包