Home > Article > Web Front-end > How ajax realizes simple data interaction between front and backend
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('click',register); }); function register(){ var name = $("#name").attr('value'); var password = $("#password").attr('value'); var repassword = $("#repassword").attr('value'); 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==''){ alert('用户名不能为空!'); $("#name").focus(); return false; } if(password==null || password==''){ alert('密码不能为空!'); $("#password").focus(); return false; } if(repassword==null || repassword==''){ alert('确认密码不能为空!'); $("#repassword").focus(); return false; }else if(password != repassword){ alert('两次密码输入不一致!'); $("#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!