Comment ajax réalise une interaction simple des données entre le front et le backend-js tutoriel-php.cn

Comment ajax réalise une interaction simple des données entre le front et le backend

零到壹度

Libérer： 2018-03-22 16:39:24

original

3994 Les gens l'ont consulté

Cet article vous explique principalement comment ajax peut réaliser une interaction simple de données entre le front et le backend. Il est principalement partagé avec vous sous forme de code. J'espère qu'il pourra vous aider.

Sans plus attendre, passons directement au code :

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ZERO</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
	
	$(document).ready(function(){
		$("#regist").bind(&#39;click&#39;,register);
	});
	
	function register(){
		var name = $("#name").attr(&#39;value&#39;);
		var password = $("#password").attr(&#39;value&#39;);
		var repassword = $("#repassword").attr(&#39;value&#39;);
		if(validate(name,password,repassword)){
			$.ajax({
				url: "ajaxdemo",  
				dataType : "json",  
				type: "post",  
				data: {"name":name,"password":password},
				success:function(data){
					alert(data.demo); 
				},
				error: function() {
					alert("ajax执行失败"); 
				}
		    });
		}
	}
	
	/*   验证方法         */
	function validate(name,password,repassword){
		if(name==null || name==&#39;&#39;){ 
			alert(&#39;用户名不能为空！&#39;);
			$("#name").focus();
			
			return false;
		}
		if(password==null || password==&#39;&#39;){
			alert(&#39;密码不能为空！&#39;);
			$("#password").focus();
			
			return false;
		}
		if(repassword==null || repassword==&#39;&#39;){
			alert(&#39;确认密码不能为空！&#39;);
			$("#repassword").focus();
			
			return false;
		}else if(password != repassword){
			alert(&#39;两次密码输入不一致！&#39;);
			$("#repassword").focus();
			
			return false;
		}
		
		return true;
	}
</script>
<style type="text/css">
	.demo {width:250px;height:40px;display:none; }
</style>
<body>
	<p id="content">
		<table>
			<tr>
				<td>用 户 名：</td>
				<td>
					<input  type="text" name="name" id="name" />
				</td>
			</tr>
			<tr>
				<td>密　　码：</td>
				<td>
					<input type="password" name="password" id="password"/>
				</td>
			</tr>				
			<tr>
				<td>确认密码：</td>
				<td>
					<input type="password" name="repassword" id="repassword"/>
				</td>
			</tr>				
			<tr>
				<td colspan="2" align="CENTER">
					<BR><input type="button" id="regist" value="注册"/>
				</td>
			</tr>	
		</table>
	</p>
	
</body>
</html>

Copier après la connexion

Voici tous les codes jsp !

Le code est donné dans son intégralité pour une visualisation facile !

Je posterai la partie utilisée du code java ! Parce qu’il y a beaucoup de choses à l’intérieur de la couche de contrôle !

                @ResponseBody
		@RequestMapping(value = "ajaxdemo" , method = RequestMethod.POST)
		public  JSONObject  ajaxdemo(HttpServletRequest req){
		//	System.out.println(name);
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("demo", "demo");
		System.out.println("-----");
		
		String parameter = req.getParameter("name");
		System.out.println(parameter);
		String parameter2 = req.getParameter("password");
		System.out.println(parameter2);

		
	
			
			
			return jsonObject;
			
		}

Copier après la connexion

Cela utilise Request pour recevoir des données, et il existe une autre façon de recevoir des données

@RequestBody

Copier après la connexion

La page jsp peut toujours être utilisée sans aucun problème, mais les données reçues sont épissé

	@ResponseBody
		@RequestMapping(value = "ajaxdemo" , method = RequestMethod.POST)
		public  JSONObject  ajaxdemo(@RequestBody String req){
			System.out.println(req);
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("demo", "demo");
		System.out.println("-----");
		
//		String parameter = req.getParameter("name");
//		System.out.println(parameter);
//		String parameter2 = req.getParameter("password");
//		System.out.println(parameter2);

		
	
		
			
			return jsonObject;
			
		}

Copier après la connexion

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!