SpringMVC------Ajax

AJAX = Asychronous JavaScript and XML (Asynchronous JavaScript and xml).
AJAX is has been that without having to reload the page really can update part of the page technology.

Ajax is not a new language, but that has been used to create a better, faster and more interactive web application technologies.

In 2005, Google through the Google Suggest AJAX became popular.

Google Suggest uses AJAX to create highly dynamic web page:
When you enter a keyword in the search box of Google, JavaScrip put these characters to the server, and then go to the service will return a list of search suggestions.
Like Baidu's search box as:

Traditional web page (that is, without ajax technology web page), you want to update or submit a form, you need to reload the entire page.
Ajax web page using technology, by a small amount of data exchange server in the background, you can achieve asynchronous partial update.

Use AJAX you can do:
when registering, enter your user name automatically detects whether the user already exists.
When landing, suggesting Username Password error
deleting data rows, row ID will be sent to the background, the background to delete the database, the database is deleted successfully, also remove the page rows of data in the DOM.

We can use a label to the front of a fake look of ajax. iframe tag

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<title>ajax</title>
<script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
<script>

/ *
JQuery.post (...)
all the parameters:
url: the URL of the page address to be loaded (required)
data: to be sent Key / value parameters of
success: Success callback function when loading
data: data request to return
status: request status is returned
* /
function A1 () {
// get default Ajax request
$ .post ({
URL: "$ {} pageContext.request.contextPath / Ajax / A1",
Data: { 'name': $ ( " #txtName ") Val ()},.
Success: function (Data, Status) {
the console.log (Data);
the console.log (Status);
}
});
}

</ Script>
</ head>
<body>
<% - onblur: lose focus trigger event -%>
Username: <the INPUT of the type = "text" the above mentioned id = "txtName" onblur = "a1 ()" />
< / body>
---------------------
author: java-explore
source: CSDN
original: https: //blog.csdn.net/weixin_44821177/article/details/ 98465253
copyright: This article is a blogger original article, reproduced, please attach Bowen link!

Then write our contorller:

package com.wu.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
@RequestMapping("/ajax")
public class AjaxController {
//第一种方式，服务器要返回一个字符串，直接使用response
@RequestMapping("/a1")
public void ajax(String name, HttpServletResponse response) throws IOException {
if ("admin".equals(name)){
response.getWriter().print("true");
}else {
response.getWriter().print("false");
}
}
}

operation result:

Click on the input box, when a mouse click outside of the input box will trigger events: shown false success

On the basis of the original upgrade:

 1 @RequestMapping("/a3")
 2 @ResponseBody
 3 public String ajax3(String name,String pwd){
 4 String msg = "";
 5 if (name!=null){
 6 if ("admin".equals(name)){
 7 msg = "ok";
 8 }else {
 9 msg = "用户名有误";
10 }
11 }
12 if (pwd!=null){
13 if ("123456".equals(pwd)){
14 msg = "ok";
15 }else {
16 msg = "密码输入有误";
17 }
18 }
19 return msg;
20 }
21 1
22 
23 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
24 <html>
25 <head>
26 <title>Title</title>
27 <script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
28 
29 <script>
30 function a1() {
31 $.post({
32 url:"${pageContext.request.contextPath}/ajax/a3",
33 data:{"name":$("#name").val()},
34 success: function (data) {
35 if (data.toString()=='ok') { //信息核对成功
36 $('#userInfo').css("color","green");
37 }else {
38 $('#userInfo').css("color","red");
39 }
40 $("#userInfo").html(data);
41 }
42 })
43 
44 }
45 function a2() {
46 $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("#pwd").val()},function (data) {
47 if (data.toString()=='ok') { //信息核对成功
48 $('#pwdInfo').css("color","green");
49 }else {
50 $('#pwdInfo').css("color","red");
51 }
52 $("#pwdInfo").html(data);
53 })
54 }
55 </script>
56 
57 </head>
58 <body>
59 </html>

运行结果“：”

输入正确的用户名和密码：

nice大功告成动态请求响应局部刷新就是如此。。。
---------------------
作者：java—explore
来源：CSDN
原文：https://blog.csdn.net/weixin_44821177/article/details/98465253
版权声明：本文为博主原创文章，转载请附上博文链接！

Guess you like