How to use ajax request in jquery

In jquery, you can use the "$.ajax" method, which is used to perform AJAX (asynchronous HTTP) requests. It is usually used for requests that cannot be completed by other methods. The syntax is "$.ajax([settings ])"; where settings represents a series of key-value pairs for configuring ajax requests.

The operating environment of this article: Windows 10 system, jquery version 3.6.0, Dell G3 computer.

How to use ajax request in jquery

1. Previous Ajax request

The implementation of Ajax request is divided into five steps:

1. Create the request object
2. Set the connection information with the server
3. Send data to the server
4. Set the callback function
5. Receive the response data from the server

It seems troublesome to write these five steps every time, so it is simpler to implement using jQuery.

2. Use jQuery to implement

Syntax

$.ajax([settings])
settings is a series of keys for configuring ajax requests Value pairs, specific parameter descriptions are as follows (parameter source novice tutorial)

Name	Value/Description
async	Boolean value indicating whether the request is processed asynchronously. The default is true.
beforeSend(xhr)	Function to run before sending the request.
cache	Boolean value indicating whether the browser caches the requested page. The default is true.
complete(xhr,status)	Function that runs when the request is completed (called after the request succeeds or fails, that is, after success and error function).
contentType	The content type used when sending data to the server. The default is: "application/x-www-form-urlencoded".
context	Specifies the "this" value for all AJAX-related callback functions.
data	Specifies the data to be sent to the server.
dataFilter(data,type)	Function used to process XMLHttpRequest raw response data.
dataType	The expected data type of the server response.
error(xhr,status,error)	Function to run if the request fails.
global	Boolean value that specifies whether the global AJAX event handler should be triggered for the request. The default is true.
ifModified	Boolean value that specifies whether the request succeeds only if the response has changed since the last request. The default is false.
jsonp	Rewrite the string of the callback function in a jsonp.
jsonpCallback	Specifies the name of the callback function in a jsonp.
password	Specifies the password used in HTTP access authentication requests.
processData	Boolean value that specifies whether the data sent through the request is converted into a query string. The default is true.
scriptCharset	Specifies the requested character set.
success(result,status,xhr)	Function that runs when the request succeeds.
timeout	Set the local request timeout (in milliseconds).
traditional	Boolean value that specifies whether to use the traditional style of parameter serialization.
type	Specifies the type of request (GET or POST).
url	Specifies the URL to send the request. The default is the current page.
username	Specifies the username used in HTTP access authentication requests.
xhr	Function used to create XMLHttpRequest objects.

3. Implementation steps

Write the page on the jsp/html page and send the ajax request

Use jQuery to write the login and registration page. The specific code is attached At the end of the article

Take the implementation of the login function as an example. The ajax request is as follows:

$.ajax({
    			type : "POST",			//以post方法提交数据给服务器
    			url : "User",				//提交数据到User
    			dataType : "text",		//数据类型
    			data : {						//传给服务器的数据
    				"name": $("#name").val(),			
    				"password":$("#pwd").val()
    				},
    			success:function(msg) {			//回调函数
    				if(msg =="OK"){
    					alert("登录成功！");
    				}
    				else{
    					alert("登录失败！");
    				}
    			}});

Writing the web.xml configuration file

The url address User just now What it is and where it comes from is what is told to the computer through this configuration file

<servlet>
		<!-- servlet-name相当于是你想要找的文件的一个别名，一般用类名来代替 -->
    <servlet-name>User</servlet-name>
    <!-- servlet-class 是类的具体位置，不用加.java -->
    <servlet-class>scau.User</servlet-class>
  </servlet>
  <servlet-mapping>
  	<!-- 这里的servlet-name必须和上面的一致 -->
    <servlet-name>User</servlet-name>
    <!--自己定义的名称，url写的就是这个 -->
    <url-pattern>/user</url-pattern>
  </servlet-mapping>

Looking for relationships:

Writing java classes

Accept the data passed in from the front end and write a java class to accept and process it

public class User extends HttpServlet {
	
	//因为刚刚请求是post，所以用doPost来接受参数
	//如果用get，则用doGet接受参数
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("--------------------------------------------------");
		request.setCharacterEncoding("UTF-8");
		// 接受前端传进来的数据，即刚刚的data
		String name = request.getParameter("name");
		String pwd = request.getParameter("password");
		//在控制台输出参数，验证是否正确
		System.out.println("name:"+name);
		System.out.println("pwd:"+pwd);
		//根据自己的需求处理数据
		//这里没有连接数据库，就假设已经用有一个用户Lee,密码是123，如果输入这个则登录成功，其余则登录失败
		String msg = "";
		if (name.equals("Lee") && pwd.equals("123")) {
			msg = "OK";
		} else {
			msg = "bad";
		}
		//输出结果，看是否是预期结果
		System.out.println("msg:"+msg);
		//返回数据给前端
		//设置编码
		response.setContentType("text/html;charset=UTF-8");
		//创建out对象
		PrintWriter out = response.getWriter();		
		//返回msg给前端
		out.write(msg);
	}}

Now let’s take a look at our callback function

success:function(msg) {			//msg是刚刚java程序返回的数据
    				if(msg =="OK"){	//如果返回OK，则弹出登录成功的页面
    					alert("登录成功！");
    				}
    				else{			//其他则弹出登录成功的页面
    					alert("登录失败！");
    				}
    			}

3. Summary

Realize front-end and back-end interaction through ajax. The main process is that the front-end sends a request, the back-end accepts the request, and finally the data is sent to the front-end. Using jQuery can greatly reduce the amount of code and is easy to understand. The steps are mainly divided into three major steps:

1. Write the page and send the request
2. Write web.xml
3. Write the java class

Related tutorial recommendations: AJAX video tutorial, jQuery video tutorial

The above is the detailed content of How to use ajax request in jquery. For more information, please follow other related articles on the PHP Chinese website!