随笔 - 47  文章 - 0  评论 - 0  阅读 - 10万

Ajax提交from表单

一,使用Ajax提交form表单到后台传参问题

1,首先,定义一个form:

复制代码
<form class="form-horizontal" role="form" id="form_parameters">
                <div class="form-group">
                    <label  class="col-sm-2 control-label">AA:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="AA" id="AA">
                        <font color=red>*</font>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">BB:</label>
                    <div class="col-sm-10" >
                        <input type="text" class="form-control" name="BB" id="BB">
                        <font color=red>*</font>
                    </div>
                </div>
</form>
View Code
复制代码

2,提交表单,拼装Json数据

复制代码
 var result = $('#form_parameters').serializeArray();  //获取表单内容赋值给result,表单里的值是以"name","name值"; "value","value值"的Map数组存在   
                   
 var resultJSON = {};                                 //定义json对象
  for (var i = 0;i<result.length;i++){
       resultJSON[result[i].name] = result[i].value; //通过循环,组装json,格式为{"name值1":"value值1","name值2":"value值2",...}
     }                
View Code
复制代码

3,Ajax向后台传值:

复制代码
$.ajax({
                type: "POST",                  //提交方式
                dataType: "json",              //预期服务器返回的数据类型
                url: "/static/action" ,          //目标url
                data: resultJSON, //提交的数据
                success: function (result) {
                if(result.code == 0){
                    alert(result.msg);
                    return;
                }
                if(result.available ==1){
                    alert(result.msg);
                }

             error : function() {
                    alert("异常!");
                }
View Code
复制代码

ok,后台controller直接通过request取值即可。

 

posted on   MrQuan  阅读(3666)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示