search

Home >Web Front-end >JS Tutorial >How ajax realizes simple data interaction between front and backend

How ajax realizes simple data interaction between front and backend

零到壹度
零到壹度Original
2018-03-22 16:39:243991browse

This article mainly explains to you how ajax realizes simple data interaction between the front and backends. It is mainly shared with you in the form of code. I hope it can help you.

Without further ado, let’s go straight to the 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>

Here are all the jsp codes!

The code is given in full for easy reading!

I will post the used part of the java code! Because there are a lot of things inside the control layer! 

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

This is to use Request to receive data. There is another kind of reception. You can still use the 

@RequestBody

jsp page without any problems, but the received data is spliced ​​together

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

The above is the detailed content of How ajax realizes simple data interaction between front and backend. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js method to execute function immediatelyNext article：js method to execute function immediately

Related articles

See more