Cet article présente principalement des exemples d'interaction front-end et back-end jQuery Ajax utilisant JSON. Le front-end transmet le json au back-end via jQuery Ajax. Le back-end reçoit le json, traite le json et le. le back-end renvoie un json au front-end Si vous êtes intéressé, vous pouvez en savoir plus, j'espère que cela aidera tout le monde.
Exigences :
Le front-end transmet le json au back-end via jQuery Ajax, le back-end reçoit le json, traite le json et le back-end renvoie un json vers le front-end
Comment utiliser le servlet ici
1 Utilisez la méthode $.post
page index.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<script src="js/jquery-1.12.2.js"></script>
<script language="JavaScript">
function checkUserid() {
$.post('Ajax/CheckServlet',//url
{
userid : $("#userid").val(),
sex : "男"
}, function(data) {
var obj = eval('(' + data + ')');
alert(obj.success);
});
}
</script>
</head>
<body>
用户ID:
<input type="text" id="userid" name="userid"> <span id="msg"></span>
<br> <button onclick="checkUserid()">传输</button>
</body>
</html>Copier après la connexion
Le code CheckServlet.Java est le suivant
package com.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;
public class CheckServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*设置字符集为'UTF-8'*/
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String userid = request.getParameter("userid"); // 接收userid
String sex = request.getParameter("sex");//接收性别
System.out.println(userid);
System.out.println(sex);
//写返回的JSON
PrintWriter pw = response.getWriter();
String json = "{'success':'成功','false':'失败'}";
pw.print(json);
pw.flush();
pw.close();
}
}Copier après la connexion
Étant donné que la méthode servlet est utilisée ici, web.xml doit être configuré
<?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">
<display-name>Ajax</display-name>
<servlet>
<servlet-name>CheckServlet</servlet-name>
<servlet-class>com.ajax.CheckServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckServlet</servlet-name>
<url-pattern>/Ajax/CheckServlet</url-pattern>
</servlet-mapping>
</web-app>Copier après la connexion
Entrez un identifiant sur la page, qui peut être reçu et imprimé en arrière-plan. L'arrière-plan utilise PrintWriter pour réécrire le JSON et le renvoyer au premier plan. end. Le front-end utilise eval pour transformer JSON en objet Object et obtient la valeur JSON via obj.name
2 Utilisez la méthode $.get, modifiez simplement la publication dans la page jsp pour obtenir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<script src="js/jquery-1.12.2.js"></script>
<script language="JavaScript">
function checkUserid() {
$.get(
'Ajax/CheckServlet',//url
{
userid:$("#userid").val(),
sex:"男"
},
function(data){
var obj = eval('('+data+')');
alert(obj.success);
}
);
}
</script>
</head>
<body>
用户ID:
<input type="text" id="userid" name="userid"> <span id="msg"></span>
<br>
<button onclick="checkUserid()">传输</button>
</body>
</html>Copier après la connexion
Le résultat est le même que celui de $.post
3 Grâce à la méthode $.ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<script src="js/jquery-1.12.2.js"></script>
<script language="JavaScript">
function checkUserid() {
$.ajax({
type : 'post',
data : {
userid : $("#userid").val(),
sex : "男"
},
url : "Ajax/CheckServlet",
success : function(data) {
var obj = eval('(' + data + ')');
alert(obj.success);
},
error : function() {
},
complete : function() {
}
});
}
</script>
</head>
<body>
用户ID:
<input type="text" id="userid" name="userid"> <span id="msg"></span>
<br>
<button onclick="checkUserid()">传输</button>
</body>
</html>Copier après la connexion
La méthode $.ajax peut également être divisée en méthodes post et get Modifiez le type pour modifier la méthode d'envoi
Le résultat est le. identique à la méthode 1
Recommandations associées :
javascript analyse l'url en json Deux méthodes de format
Maîtriser complètement les principes et méthodes d'implémentation de jsonp
JS obtient plusieurs éléments de données dans un champ de formulaire et les convertit en partage d'exemple au format json
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
