[JavaScript知识库] Jquery_

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Jquery__ajax -> 正文阅读

[JavaScript知识库]Jquery__ajax

一、jQuery -?AJAX 简介

Ajax 即“Asynchronous?Javascript?And?XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

后台程序：

????????1.打开eclipse

????????2.创建maven 项目

????????3.pom.xml配置jdk1.8的插件

<build>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.6.0</version>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
		</plugins>
	</build>

选中项目----右键----maven---update project

4.在当前项目的src/main/webapp下创建WEB-INF文件夹，然后在WEB-INF文件夹中创建web.xm

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  
</web-app

5.在pom.xml导入依赖包

<dependencies>
		<!-- 配置导入servlet的依赖库 -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.0.1</version>
			<scope>provided</scope>
		</dependency>
<!-- 配置导入gson的依赖库 -->
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.5</version>
		</dependency>
</dependencies>

5.pom.xml配置服务器插件

<!-- 配置Tomcat插件 -->
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<version>2.2</version>
				<configuration>
					<!-- 服务器访问端口号 -->
					<port>8080</port>
					<!--项目访问路径 -->
					<path>/</path>
					<!--服务器编码 -->
					<uriEncoding>UTF-8</uriEncoding>
				</configuration>
			</plugin>

6.创建实现跨域请求的过滤器

? ? 6.1.src/main/java创建package程序包【com.wangxing.filter】

? ? 6.2.在创建的程序包【com.wangxing.filter】中创建过滤器类

package com.wangxing.filter;
 
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
 
public class CORSFilter implements Filter {
 
	 @Override
	  public void init(FilterConfig filterConfig) throws ServletException {
	  }
 
	  // TODO：这里应该是只需要处理OPTIONS请求即可~~~
	  @Override
	  public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
	    	HttpServletResponse response = (HttpServletResponse) servletResponse;
	    	response.setHeader("Access-Control-Allow-Origin", "*");
	    	response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
	    	response.setHeader("Access-Control-Max-Age", "3600");
	    	response.setHeader("Access-Control-Allow-Headers", "content-type,Authorization");
	    	// response.setHeader("Access-Control-Allow-Credentials", "true");
	    	filterChain.doFilter(servletRequest, servletResponse);
	  }
 
	  @Override
	  public void destroy() {
	  }
	
}

? ? 6.3在web.xml文件中配置这个过滤器

<!-- 跨域过滤器 -->
  <filter>
  	<filter-name>corsfilter</filter-name>
  	<filter-class>com.wangxing.filter.CORSFilter</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>corsfilter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>

7.创建保存学生信息的程序包【com.wangxing.javabean】和java类

? 创建保存java类的程序包“src/main/java”--右键-->newther--->java---package--“com.wangxing.javabean”

package com.wangxing.javabean;
/*
 创建学生信息的java类
 */
public class Student {
	private int stuid;
	private String stuname;
	private int stuage;
	private String stuaddress;
	
	public Student(int stuid,String stuname,int stuage,String stuaddress ){
		this.stuid=stuid;
		this.stuname=stuname;
		this.stuage=stuage;
		this.stuaddress=stuaddress;
		
	}
	
	public int getStuid() {
		return stuid;
	}
	public void setStuid(int stuid) {
		this.stuid = stuid;
	}
	public String getStuname() {
		return stuname;
	}
	public void setStuname(String stuname) {
		this.stuname = stuname;
	}
	public int getStuage() {
		return stuage;
	}
	public void setStuage(int stuage) {
		this.stuage = stuage;
	}
	public String getStuaddress() {
		return stuaddress;
	}
	public void setStuaddress(String stuaddress) {
		this.stuaddress = stuaddress;
	}
	
	
}

8.创建保存业务处理程序的程序包【com.wangxing.servlet】

????????创建处理登陆请求的处理程序

package com.wangxing.servlet;

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;

public class LoginServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置请求和响应对象的字符编码
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		//得到来自页面的用户名和密码
		String name=req.getParameter("username");
		String pass=req.getParameter("password");
		//定义返回的字符串
		String returnstr="";
		//判断用户名和密码是否合法
		if(name.equals("zhangsan")&&pass.equals("123456")){
			returnstr="{\"success\":true}";
		}else{
			returnstr="{\"success\":false}";
		}
		//得到输出流对象
		PrintWriter  out=resp.getWriter();
		out.write(returnstr);
		out.close();
		
		
	}

}

web.xml文件配置登录程序的访问地址

<!-- 配置登录程序的访问地址 -->
  <servlet>
		<servlet-name>login</servlet-name>
		<servlet-class>com.wangxing.servlet.LoginServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>login</servlet-name>
		<url-pattern>/login</url-pattern>
	</servlet-mapping>

9.创建得到全部学生信息的处理程序

package com.wangxing.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.google.gson.Gson;
import com.wangxing.javabean.Student;
 
/*
 * 请求处理程序
 * @author Administrator
 */
//使用extends接口将servlet的依赖包待得HttpServlet类继承给StudentSrevlet类上
public class StudentSrevlet extends HttpServlet {
	//通过继承过来的类找到适用的方法（请求处理）
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doPost(req, resp);
	}
 
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//将处理程序的请求卸载dopost方法中
		//创建学生信息对象【一组】
		Student stu1 = new Student(1001,"fxt",22,"西安");
		Student stu2 = new Student(1002,"ch",22,"西安");
		Student stu3 = new Student(1003,"htt",23,"上海");
		//创建保存学生信息的集合
		List<Student>stulist=new ArrayList<Student>();
		//将学生信息装进集合中
		stulist.add(stu1);
		stulist.add(stu2);
		stulist.add(stu3);
		//将装有学生信息对象到集合转换成json字符串
		//因为浏览器页面识别不了java对象
		Gson gson=new Gson();
		String studentjson=gson.toJson(stulist);
		//设置请求对象/相应对象的字符编码
		req.setCharacterEncoding("utf-8");
		req.setCharacterEncoding("utf-8");
		//创建输出流对象
		PrintWriter out = resp.getWriter();
		//写出json字符串
		out.write(studentjson);
		//关闭
		out.close();
	}
	
}

web.xml中配置得到全部学生信息的处理程序

<servlet>
  	<servlet-name>student</servlet-name>
  	<servlet-class>com.wangxing.servlet.StudentSrevlet</servlet-class>
  </servlet>
<servlet-mapping>
  	<servlet-name>student</servlet-name>
  	<url-pattern>/getstudentinfo</url-pattern>
 </servlet-mapping>

启动服务器测试登陆请求:http://localhost:8080/login?username=zhangsan&password=123456

?二、jQuery -?AJAX的常用方法

jquery的ajax的操作方法有4种

<body>
  <h1>jquery的ajax的操作方法有4中</h1>
  <h2>load()方法[不使用]，需要html元素对应的jquery对象调用</h2>
  <h2>ajax()方法</h2>
  <h3>get()方法----只能发送get请求</h3>
  <h3>post()方法----只能发送post请求</h3>
  <h4>get/post区别</h4>
  <h5>1.传递参数时<br>
    get将请求的参数值直接写在请求地址【url】后面<br>
    例如:http://localhost:8080/login?username=zhangsan&password=123456<br>
    post将请求的参数值封装到http协议中<br>
    post兼容get
 </h5>
 <h5>2.传递参数数据量<br>
    get将请求传递参数的数据量最多255个字符<br>
    post将请求传递参数的数据量没有上限<br>
 </h5>
</body>

1.$.ajax()执行异步 AJAX 请求

语法：$.ajax({name:value, name:value, ... })

url:"后端处理程序的访问路径"---后端处理程序的访问路径

type:"GET"/"POST"?---?规定请求的类型（GET?或?POST）

data:{userid:userid}?---?规定要发送到服务器的数据。

dataType:"xml"/"text"/"json"??----规定预期的服务器响应的数据类型

success:function(result,status,xhr)?---??规定当请求成功时运行的函数。

async:true/false??---布尔值，表示请求是否异步处理。默认是?true。

error:function(status,xhr,error)???---请求失败要运行的函数。

例如：ajax.html

创建用户登录的操作页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
    <script>
        //jquery的ajax的操作方法有4种
        //ajax()方法
        $(function(){
            $("#login").click(function(){
                //得到用户名/密码
                var name= $("#name").val();
                var pass=$("#pass").val();
                ///$.ajax({name:value, name:value, ... })
                //url:"xxxx"---后端处理程序的访问路径
                //type:"GET"/"POST"----规定请求的类型（GET?或?POST）
                //data:{userid:userid}??规定要发送到服务器的数据。
                //dataType:"xml"/"html"/"text"/"json"??规定预期的服务器响应的数据类型
                //success:function(result,status,xhr)???规定当请求成功时运行的函数。
                //async:true/false??布尔值，表示请求是否异步处理。默认是?true。
                //error:function(status,xhr,error)???请求失败要运行的函数。
                var myurl="http://localhost:8080/login?username="+name+"&password="+pass;
                //1.不规定要发送到服务器的数据。
                /*$.ajax({
                    url:myurl,
                    type:"GET",
                    dataType:"text",
                    success:function(resp){
                        var jsonobj=JSON.parse(resp);
                        if(jsonobj.success){
                            window.open("success.html")
                        }else{
                            alert("用户名密码错误")
                        }},
                    async:true,
                    error:function(){}
                })*/
                //2.规定要发送到服务器的数据。
                $.ajax({
                    url:myurl,
                    type:"POST",//POST兼容了get的请求方式可以得到字符串蚕食
                    dataType:"text",
                    success:function(resp){
                        var jsonobj=JSON.parse(resp);
                        if(jsonobj.success){
                            window.open("success.html")
                       }else{
                           alert("用户名密码错误!");
                       }
                    }
                })
                //get获取的url--请求网址: http://localhost:8080/login?username=zhangsan&password=123456
                //get获得的字符串参数
                //post获取的请求网址：http://localhost:8080/login
                //post获取到的是表单参数
                 /*$.ajax({
                    url:"http://localhost:8080/login",
                    type:"POST",
                    data:{username:name,password:pass},
                    dataType:"text",
                    success:function(resp){
                       var jsonobj=JSON.parse(resp);
                       if(jsonobj.success){
                        window.open("success.html");
                       }else{
                           alert("用户名密码错误!");
                       }
                    },
                    async:true,
                    error:function(){}
                    })*/
            })
        })
    </script>
</head>

<body>
  
</body>
    <table>
        <tr>
            <td><h1>用户登录</h1></td>
        </tr>
        <tr>
            <td><input id="name" type="text" placeholder="用户名"></td>
        </tr>
        <tr>
            <td><input id="pass" type="password"></td>
        </tr>
        <tr>
            <td><input id="login"  type="button" value="登录"></td>
        </tr>   
    </table>?
</html>

创建一个成功登录页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
    <script>
    </script>
</head>
<body>
    <h4>登陆成功</h4>
</body>
</html>

?这个是post方法。但是URL是直接带参数的，所以post兼容了get的请求方式

?2.$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据

语法

$.get(URL,data,function(data,status,xhr),dataType)

url----后端处理程序的访问路径

data---提交给后端处理程序的数据。

function(data,status,xhr)----当请求成功时运行的函数

dataType---"text"、"json" ?预期的服务器响应的数据类型.

例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
    <script>
        //jquery的ajax的操作方法有4种
        //get()方法
        $(function(){
            $("#login").click(function(){
               //得到用户名/密码
               var name=$("#name").val();
                var pass=$("#pass").val();
                var myurl="http://localhost:8080/login?username="+name+"&password="+pass;
                //$.get(URL,data,function(data,status,xhr),dataType)
                //url---后端处理程序的访问路径
                //data---规定要发送到服务器的数据。
                //function(result,status,xhr)???规定当请求成功时运行的函数。
                //dataType:"xml"/"html"/"text"/"json"??规定预期的服务器响应的数据类型
                /*$.get(myurl,function(resp){
                    var jsonobj=JSON.parse(resp);
                    if(jsonobj.success){
                            window.open("success.html");
                    }else{
                           alert("用户名密码错误!");
                       }
                },"text")*/

                $.get("http://localhost:8080/login","username="+name+"&password="+pass,function(resp){
                    var jsonobj=JSON.parse(resp);
                    if(jsonobj.success){
                            window.open("success.html");
                    }else{
                           alert("用户名密码错误!");
                       }
                },"text")

            })
        })
    </script>
</head>

<body>
  
</body>
    <table>
        <tr>
            <td><h1>用户登录</h1></td>
        </tr>
        <tr>
            <td><input id="name" type="text" placeholder="用户名"></td>
        </tr>
        <tr>
            <td><input id="pass" type="password"></td>
        </tr>
        <tr>
            <td><input id="login"  type="button" value="登录"></td>
        </tr>   
    </table>?
</html>

??3.$.post()使用 AJAX 的 HTTP GET 请求从服务器加载数据

语法$.post(URL,data,function(data,status,xhr),dataType)

url----后端处理程序的访问路径

data---提交给后端处理程序的数据。

function(data,status,xhr)----当请求成功时运行的函数

dataType---"text"、"json" ?预期的服务器响应的数据类型.

例如;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
    <script>
        //jquery的ajax的操作方法有4种
        //get()方法
        $(function(){
            $("#login").click(function(){
               //得到用户名/密码
               var name=$("#name").val();
                var pass=$("#pass").val();
                var myurl="http://localhost:8080/login";
                //$.post(URL,data,function(data,status,xhr),dataType)
                //url---后端处理程序的访问路径
                //data-{userid:userid}规定要发送到服务器的数据。
                //function(result,status,xhr)???规定当请求成功时运行的函数。
                //dataType:"xml"/"html"/"text"/"json"??规定预期的服务器响应的数据类型
                $.post(myurl,"username="+name+"&password="+pass,function(resp){
                    var jsonobj=JSON.parse(resp);
                    if(jsonobj.success){
                            window.open("success.html");
                    }else{
                           alert("用户名密码错误!");
                       }
                },"text")
                var data={username:name,password:pass};
                /*$.post("http://localhost:8080/login",data,function(resp){
                    var jsonobj=JSON.parse(resp);
                    if(jsonobj.success){
                            window.open("success.html");
                    }else{
                           alert("用户名密码错误!");
                       }
                },"text")*/

            })
        })
    </script>
</head>

<body>
  
</body>
    <table>
        <tr>
            <td><h1>用户登录</h1></td>
        </tr>
        <tr>
            <td><input id="name" type="text" placeholder="用户名"></td>
        </tr>
        <tr>
            <td><input id="pass" type="password"></td>
        </tr>
        <tr>
            <td><input id="login"  type="button" value="登录"></td>
        </tr>   
    </table>?
</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集