Web应用前后端如何交互

最新推荐文章于 2024-04-27 18:17:38 发布

weixin_38311255

最新推荐文章于 2024-04-27 18:17:38 发布

阅读量1.3k

点赞数 5

文章标签： ajax web json

本文链接：https://blog.csdn.net/weixin_38311255/article/details/105742011

版权

web前端和后端怎么连接

数据网站主要分为三层
第一层表示层，这部分用的是html，css/javascript代码来实现，就是浏览器打开的网页
第二层是业务层，这一层负责处理数据，常用语言是java，jsp。处理前台传过来的数据，进行数据库操作，把结果返回给前端。
第三层是数据层，用来存储数据

从前端提交数据

前端提交

用document.getElement读取前端表格数据
将读取到的数据格式化为json
用ajax提交json数据（用post方式提交）
后端处理
后端通过request.getParameter(“data”)获取通过ajax提交的数据data
在吧数据转化为json对象，然后转化为相应的类对象

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>用AJAX以JSON方式提交数据</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
</head> 
<body> 
    <form > 
       名称：<input type="text" id="name"/><br/> 
        血量：<input type="text" id="hp"/><br/> 
        伤害： <input type="text" name="damage" id="damage"> <br>
        <input type="button" value="提交" id="sender">  
    </form> 
     
    <script> 
    $('#sender').click(function(){ 
        var name=document.getElementById('name').value;　　　　　　 //1.从输入端获取 值
        var hp=document.getElementById('hp').value; 
        var hero={"name":name,"hp":hp};　　　　　　　　　　　　　　   //2.把获取的值格式化
        
        var url="submitServlet"; 
        //以post方式提交ajax ，ajax直接传的是json对象，这里用stringfy转化为字符串
        $.post(
                url,
                {"data":JSON.stringify(hero)},　　　　　　　　　　　//提交的数据是把上面的hero转化为json格式
                function(data) { 
                     alert("提交成功，请在Tomcat控制台查看服务端接收到的数据");
         });  
    }); 
    </script> 
</body> 
   
</body>
</html>

package servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import entity.Hero;
import net.sf.json.JSONObject;

public class SubmitServlet extends HttpServlet { 
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        String data =request.getParameter("data");　　　　　　　　　　//获取通过ajax提交的数据data
         
        System.out.println("服务端接收到的数据是：" +data);　　　　　　　//输出数据data
  
        JSONObject json=JSONObject.fromObject(data); 　　　　　　　　　//将其转化为json对象
          
        System.out.println("转换为JSON对象之后是："+ json);
           
        Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 　　　　//将其转化为一个Hero对象
        System.out.println("转换为Hero对象之后是："+hero);
    } 
}

使用@requestbody接收json字符串

<script type="text/javascript">  
  $(document).ready(function(){  
    var saveDataAry=[];  
    var data1={"userName":"test","address":"gz"};  
    var data2={"userName":"ququ","address":"gr"};  
    saveDataAry.push(data1);  
    saveDataAry.push(data2);      
    $.ajax({  
      type:"PUT",  
      url:"/user",  
      dataType:"json",    
      contentType:"application/json;charset=utf-8",         
      //转化为json字符串
      data:JSON.stringify(saveData),  
      success:function(data){  
                     
      }  
     });  
  });  
</script>

后端接收

//mapping中的value就是ajax中的url，
@RequestMapping(value = "user", method = RequestMethod.PUT )  
  @ResponseBody  
  public void saveUser(@RequestBody List<User> users) {  
     userService.batchSave(users);  
  }

json对象和json字符串

Json对象

对象可以通过对象.属性访问

var person = {"name":"shily","sex":"woman","age":"23"};//json对象
console.log(person);//输出{"name":"shily","sex":"woman","age":"23"}
console.log(person.name);//输出shiily
console.log(typeof person);//输出object类型

Json字符串

var person = '{"name":"shily","sex":"woman","age":"23"}';//json字符串，外面多一层单引号
console.log(person);//输出{"name":"shily","sex":"woman","age":"23"}
console.log(person.name);//输出undefuned,无法这样访问
console.log(typeof person);//输出String类型

json对象和json字符串相互转化

JSON.parse()
JSON.stringfy()

//字符串转化为json格式
var str = '{"name":"shily","sex":"woman","age":"23"}';
var strToObj = JSON.parse(str);

//json格式转化为字符串
var obj = {"name":"shily","sex":"woman","age":"23"};
var objToStr = JSON.stringfy(obj);

weixin_38311255

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Web应用前后端如何交互

web前端和后端怎么连接数据网站主要分为三层第一层表示层，这部分用的是html，css/javascript代码来实现，就是浏览器打开的网页第二层是业务层，这一层负责处理数据，常用语言是java，jsp。处理前台传过来的数据，进行数据库操作，把结果返回给前端。第三层是数据层，用来存储数据...
复制链接

扫一扫