recherche

Maison >interface Web >js tutoriel >Comment ajax réalise une interaction simple des données entre le front et le backend

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

零到壹度
零到壹度original
2018-03-22 16:39:243990parcourir

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>

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;
			
		}

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

@RequestBody

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;
			
		}

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：méthode js pour exécuter la fonction immédiatementArticle suivant：méthode js pour exécuter la fonction immédiatement

Articles Liés

Voir plus