使用js数组拼接json并post到contoller

本文介绍了一种使用JavaScript动态生成HTML表单的方法,并通过AJAX实现表单数据的提交及后端处理流程。该方法允许用户根据需求增加新的输入字段,同时详细展示了如何收集这些数据并发送到服务器进行存储。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

view:

<script type="text/javascript">

    var id = 0;
    var i = 1;
    var s = ["div1"];
    function add() {
        i++;
        var id = "div" + i.toString();
        s.push(id);
        var t = '<div id="div' + i.toString() + '" style="border: 1px dashed #F00;margin:10px" >' +
        '<input type="text" class="input-text" style="width: 180px;margin:5px" value="" name="test"/>' +
        '<input type="text" class="input-text" style="width: 180px;margin:5px" value="" name="test"/>' +
        '<input type="text" class="input-text" style="width: 180px;margin:5px;float:none;" value="" name="test" />' +
        '<input type="text" class="input-text" style="width: 180px;margin:5px" id="field_2" value="" name="test" />' +
            '<div style="background-image:url(/images/add.png);width:40px;height:40px;float:left" onclick="add()"></div>' +
            '<div style="background-image:url(/images/delect.png);width:40px;height:40px;float:right" onclick="remove(div' + i.toString() + ')"></div></div>';
        $(divList).append(t);
    }
    function remove(id) {
        id.parentNode.removeChild(id);
    }

    function article_save_submit() {

        var jsonstr = "";
        var a = [];
        var Pname = document.getElementById("txt_pjName").value;
        var PjCity = document.getElementById("txt_pjCity").value;
        var MachineNum = document.getElementById("txt_mchineNum").value;
        var IsNow = document.getElementById("select_IsNow").value;
        var PjXSName = document.getElementById("txt_PjXSName").value;
        var IsDealer = document.getElementById("txt_IsDealer").value;
        var Phone = document.getElementById("txt_phone").value;
        var Other = document.getElementById("txt_other").value;
        debugger
        var url = '@Url.Action("InserProject", "PreAdmin")';


        a.push({ 'Pname': Pname, 'PjCity': PjCity, 'MachineNum': MachineNum, 'IsNow': IsNow,'PjXSName': PjXSName, 'IsDealer': IsDealer, 'Phone': Phone, 'Other': Other })
        for (var i = 0; i < s.length; i++) {
            var divname = "#" + s[i] + "  input[type='text']";
            var x = 1;
            var PjName = "";
            var PjNum = "";
            var Xdd = "";
            var Xddw = "";
            $(divname).each(function () {
                if (x == 1) {
                    PjName = $(this).val();
                }
                if (x == 2) {
                    PjNum = $(this).val();
                }
                if (x == 3) {
                    Xdd = $(this).val();
                }
                if (x == 4) {
                    Xddw = $(this).val();
                }

                x++;

            });
            a.push({ 'PjName': PjName, 'PjNum': PjNum, 'Xdd': Xdd, 'Xddw': Xddw })
        }
        jsonstr = JSON.stringify(a);
        alert(jsonstr)

        var url = '@Url.Action("InserMachineInfo", "PreAdmin")';
        $.post(url, { jsonstr: jsonstr, id: id },
         function (istrue) {
         });
    }

controller(use ef) :

[HttpPost]
        public void InserMachineInfo(string jsonstr,int id)
        {
            //use json.net
            JArray o = (JArray)JsonConvert.DeserializeObject(jsonstr);
            IList<JToken> oList = (IList<JToken>)o;
            int proId=0;
            foreach (JToken jt in oList)
            {

                JObject jo = jt as JObject;
                using (var db = new TestTryEntities1())
                {
                    if (jt == o[0])
                    {
                        ProjectInfo pro = new ProjectInfo()
                        {
                            pname = jo["Pname"].ToString(),
                            pjCity = jo["PjCity"].ToString(),
                            machineNum = jo["MachineNum"].ToString(),
                            isNow = Convert.ToInt32(jo["IsNow"].ToString()),
                            pjXSName = jo["PjXSName"].ToString(),
                            isDealer = Convert.ToInt32(jo["IsDealer"].ToString()),
                            phone = jo["Phone"].ToString(),
                            other = jo["Other"].ToString(),
                            createtime = DateTime.Now,
                            fixtime = DateTime.Now
                        };
                        db.ProjectInfo.Add(pro);
                        db.SaveChanges();
                        proId = pro.id;
                    }
                    else 
                    {
                        machineinfo model = new machineinfo()
                        {
                            id = proId,
                            machineName = jo["PjName"].ToString(),
                            machineNum = Convert.ToInt32(jo["PjNum"].ToString()),
                            test = jo["Xdd"].ToString(),
                            other = jo["Xddw"].ToString(),
                            createtime = DateTime.Now,
                            fixtime = DateTime.Now

                        };
                        db.machineinfo.Add(model);
                        db.SaveChanges();
                    }

                }
            }
        }
### Controller 的定义与作用 #### 软件架构中的角色 在软件设计领域,Controller 是一种核心组件,在许多架构模式中扮演着重要的中介角色。特别是在模型-视图-控制器(Model-View-Controller, MVC)架构中,Controller 主要负责接收用户的输入请求将其转换为相应的操作指令[^3]。 #### 编程环境下的功能描述 具体到编程环境中,例如 Java 的 Spring MVC 框架,Controller 层的主要职责如下: 1. **接收客户端请求**:当用户发起 HTTP 请求时,Controller 首先捕获这些请求将它们映射到特定的处理方法上。 2. **调用 Service 层逻辑**:通过依赖注入机制,Controller 将所需的 Service 接口或其实现类引入当前上下文中,进一步调用对应的业务逻辑函数[^4]。 3. **返回响应结果**:完成业务逻辑处理之后,Controller 组织数据通过视图渲染或者直接以 JSON/XML 形式返回给前端。 以下是基于上述理论的一个典型代码示例: ```java @Controller public class ExampleController { @Autowired private ExampleService exampleService; @GetMapping("/example") public String handleRequest(Model model) { List<ExampleEntity> data = exampleService.fetchData(); model.addAttribute("data", data); return "examplePage"; } } ``` 在此案例中可以看出 `@Controller` 注解标记了一个控制类实例;而内部利用了自动装配技术 (`@Autowired`) 来获取服务资源,最终向模板引擎传递所需参数以便展示页面内容。 #### 总结 综上所述,无论是从宏观层面还是微观实现角度来看,Controller 均承担起连接外部交互入口和服务端核心计算单元之间的桥梁纽带职能,对于构建清晰分离关注点的应用程序至关重要。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值