投稿
  1. 极客之音首页
  2. 前端开发

Jquery__ajax

小半 • • 前端开发 • 阅读 115

导读：本篇文章讲解 Jquery__ajax，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

一、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的常用方法

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的请求方式

Jquery__ajax

 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>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79854.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！