使用jQuery发送Ajax请求 | JQERY | JSP

原创

咸咸瑜瑜 2022-05-31 17:12:39 博主文章分类：JQuery ©著作权

文章标签 ajax java html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者咸咸瑜瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

javascript原生的ajax操作比较麻烦，新版js中提供了更为便捷的操作方式我们后面再介绍，这

里先看下jQuery操作ajax。jQuery提供了一些函数简化了这些操作，接下来我们看下如何使用jQuery发送ajax请求。先准备一个servlet用来处理ajax发送的请求。

先来一个 servlet：

package ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *     使用JQ - AXAJ的操作 POST请求
 */
public class ajax extends HttpServlet {

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

    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //上面编码 下面获取参数并打印
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        //下面返回一个字符 表示成功访问
        PrintWriter out = response.getWriter();
        out.write("你成功用JQ操作了AJAX！ 分享这一秒的喜悦！");
    }

}

其功能在注释自己认真看看！

然后我们来个JSP：写个按钮叫发送JQ的AJAX操作：【POST请求的】记住导入jq的插件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jqsourse.js"></script>
</head>
<body>
    
    <input type="button" value="AXAJ发送数据">


<script type="text/javascript">
//先百度一下 jq中ajax的参数？

$('input').on('click',send);

function send() {
    $.ajax({
        url:"ajax" , //请求路径
        type:"POST" , //请求方式
        data:{"username":"bi-hu","password":123456},//请求参数
        dataType:"text",//设置接受到的响应数据的格式
        //回调函数
        success:function (data) {
            //这个data 是服务器返回的内容 什么格式就要看你设置的 dataType了：
            alert(data);
            console.log(data);
        },
        error:function () {
            console.log("出错啦...")
        }//表示如果请求响应出现错误，会执行的这个回调函数

    })    
}

</script>
     
</body>
</html>

来看下效果图：具体自己操作！免得说我骗你 .

使用jQuery发送Ajax请求 | JQERY | JSP_html

吃个宵夜先待续....

继续啊

现在来个 jq中axaj操作的 get 和 post 讲解语法：

1️⃣ get：

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

参数	描述
URL	必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： data- 包含来自请求的结果数据 status- 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr- 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型： "xml" - 一个 XML 文档 "html" - HTML 作为纯文本 "text" - 纯文本字符串 "script" - 以 JavaScript 运行响应，并以纯文本返回 "json" - 以 JSON 运行响应，并以 JavaScript 对象返回 "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

package ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *     使用JQ - AXAJ的操作
 */
public class ajax extends HttpServlet {

       
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //上面编码 下面获取参数并打印
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        //下面返回一个字符 表示成功访问
        PrintWriter out = response.getWriter();
        out.write("你成功用JQ操作了GET请求 --  AJAX！ 分享这一秒的喜悦！");
        
    }

    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //上面编码 下面获取参数并打印
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        //下面返回一个字符 表示成功访问
        PrintWriter out = response.getWriter();
        out.write("你成功用JQ操作了POST请求 --  AJAX！ 分享这一秒的喜悦！");
    }

}

然后 jsp里面的 send方法写：

function send() {
    $.get(
        "ajax",
        {
            username:"2021-5-31",
            password:"123456"            
        },
        function (data) {
            alert(data);    
        },
        "text"
    );
}

$.post方式

该方式会发送post请求方式的ajax请求
语法如下，其中[]的内容是可选的：

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

参数	描述
URL	必需。规定将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： data- 包含来自请求的结果数据 status- 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr- 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型： "xml" - 一个 XML 文档 "html" - HTML 作为纯文本 "text" - 纯文本字符串 "script" - 以 JavaScript 运行响应，并以纯文本返回 "json" - 以 JSON 运行响应，并以 JavaScript 对象返回 "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

function send() {
    $.post(
        "ajax",
        {
            username:"2021-5-31",
            password:"123456"            
        },
        function (data) {
            alert(data);    
        },
        "text"
    );
}

其实还有很多很多参数具体要你自己去学这是最基本的操作其他操作后面学到会讲===

作者：咸瑜