Ajax前后台传值

最新推荐文章于 2024-08-12 12:09:40 发布

gehulushang

最新推荐文章于 2024-08-12 12:09:40 发布

阅读量4.2k

点赞数

分类专栏：框架学习其他

其他同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

框架学习

9 篇文章 0 订阅

订阅专栏

Ajax向后台controller传递参数

function saveReportData(fileName,fileID) {
    console.log("fileName="+fileName);
    $.ajax({
        type : 'post',
        url : '${ctx}/reportmanage/specialReportManage/saveReportData',
        data:{'srFileName':fileName,"srFileID":fileID},
        traditional : true,
        async : false,         
        success : function(result){
            
        },
        error : function(result){
        }
    });    
}

后端的两种接收方式

Ajax的data参数名称（红色标识）必须和@RequestParam中的参数名称保持一致

@RequestMapping(value = "saveReportData")
@ResponseBody
public String saveReportData(
@RequestParam(value = "srFileName", defaultValue = "") String FileName,
@RequestParam(value = "srFileID", defaultValue = "") String FileID) throws IOException 
{
       specialReportManageService.saveReportData(FileName, FileID);
       return "";
}

如果没有添加@RequestParam，函数的参数名称必须和Ajax中的参数名称一致

public String saveReportData( String srFileName,String srFileID) throws IOException {
       specialReportManageService.saveReportData(FileName, FileID);
       return "";
}

JSON.parse()、JSON.stringify()和 eval()函数
(1)JSON.parse()函数

作用：将json字符串转换成json对象。

(2)JSON.stringify()函数

作用：将json对象转换成json字符串

(3)eval()函数

作用：eval()函数可计算某个字符串，并执行其中的javascript表达式或要执行的语句。

使用eval()函数也可以将JSON字符串解析为对象，这个功能能完成JSON.parse()的功能，但是有不一样的地方。

eval()还要用一对圆括号将字符串包起来，对此我寻找到比较好的解释就是：

原因：归结于eval本身的问题，由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行

(4)JSON.parse(jsonString)和eval(jsonString)区别

安全性：JSON.parse()可以解析json格式的数据，并且会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，而eval()则可以解析任何字符串，eval是不安全的。

格式严格性：JSON.parse()解析的必须是json格式的字符串要不报错，而eval()则没有这么严格，在这里“json格式的字符串”是指要求指定的字符串必须符合严格的JSON格式

JS实现Ajax

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <button type="submit" id="js_ajax_test">Ajax测试</button>
   <script>
       var js_ajax_test = document.getElementById("js_ajax_test");
       js_ajax_test = function () {
           var xmlHttp = new XMLHttpRequest();
           xmlHttp.open("POST", "/js_ajax_test/", true);
           xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
           xmlHttp.send("username=yang&password=123");
           xmlHttp.onreadystatechange = function () {
               if (xmlHttp.readyState === 4 && xmlHttp.status ===200){
                   alert(xmlHttp.responseText)
               }
           }
       }
   </script>
 
</body>
</html>

JQuery实现Ajax

<!doctype html>
<html lang="">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
   <title>ajax test</title>
</head>
<body>
   <button id="ajaxTest">AJAX测试</button>
   <script>
       $("#ajaxTest").click(function () {
           $.ajax({
               url: "/ajaxTest/",
               type: "POST",
               data: {username: "yang", password:123},
               success: function (data) {
                   alert(data)
               }
           })
       })
   </script>
</body>
</html>

参考链接：

https://blog.csdn.net/qq_37011759/article/details/86174736

https://www.cnblogs.com/tsx1230/p/8041683.html

https://www.cnblogs.com/yang-wei/p/10009053.html