您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

从控制中获取数据和表单数据提交到控制器中

HTML:

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<link href="#" rel="icon" type="image/x-icon" />

<div class="container mt-5">

        @*οnsubmit="return false;" 禁用表单的自动提交方式*@

          @*action="/Main/GetData" method="post"*@

        <form id="frm" autocomplete="off" onsubmit="return false;">

            <div class="form-group form-row">

                <label class="col-form-label col-3 text-center">姓名</label>

                <input class="form-control col-9" type="text" name="name" id="txtName" />

            </div>

            <div class="form-group form-row">

                <label class="col-form-label col-3 text-center">性别</label>

                <select class="form-control col-9" name="sex" id="cboSex">

                    <option value="0">--请选择--</option>

                    <option value="男"></option>

                    <option value="女"></option>

                </select>

            </div>

            <div class="form-group form-row">

                <label class="col-form-label col-3 text-center">地址</label>

                <textarea class="form-control col-9" name="address" id="txtAddress"></textarea>

            </div>

            <div class="form-group form-row">

                <button type="button" class="btn btn-outline-primary offset-3 mr-2" id="btnAjaxGetData">通过$.ajax()获取数据</button>

                <button type="button" class="btn btn-outline-primary mr-2" id="btnAjaxPostData">通过$.ajax()提交数据</button>

                <button type="button" class="btn btn-outline-success mr-2" id="btnGetData1">通过$.get()获取数据</button>

                <button type="button" class="btn btn-outline-success mr-2" id="btnGetData2">通过$.get()提交数据</button>

                <button type="button" class="btn btn-outline-danger mr-2" id="btnPostData1">通过$.post()提交数据</button>

                <button type="button" class="btn btn-outline-danger mr-2" id="btnPostData2">通过$.post()提交数据</button>

            </div>

        </form>

</div>

    <script src="~/Content/jquery-3.2.1.min.js"></script>

    <script src="~/Content/bootstrap.min.js"></script>

<script> 

方法一:

 

//从控制器中获取数据

        $("#btnAjaxGetData").click(function () {//click点击事件

            $.ajax({//获取数据,保存数据到服务器,成功时显示信息。

                type: "post",//可以get、post值

                url: "/jquery/PersonData",//获取路径

                success: function (data) {

                    //返回回来的data是json格式的字符串

                    data = JSON.parse(data);

                    //JOST.parse(data)将json格式的字符串转换成js对象 data js对象

                    //console.log(data);

                    $("#txtName").val(data.name);

                    $("#cboSex").val(data.sex);

                    $("#txtAddress").val(data.address);

                }

                //,error: function (data) {

                //    console.log(data);    url路径错误时,执行error

                //}

 

            });

        });

 

 

 

 //将视图的表单数据提交到控制器中

 $("#btnAjaxPostData").click(function () {

            //var name = $("#txtName").val();

            //var sex = $("#cboSex").val();

            //var address = $("#txtAddress").val();

 

            //var strData = "txtname=" + name + "&txtsex=" + sex + "&txtaddress=" + address;

            //console.log(strData);

 

            //serialize()将表格内容序列化为字符串    //serializeArray(); 将表格内容序列化为字符串

            //var strData = $("#frm").serialize();

            //console.log(strData);

 

            var arrayData = $("#frm").serializeArray();

            //console.log(arrayData);

 

 

            $.ajax({

                type:"post",//get也可以

                url: "/jquery/getDataByEntityClass",

                data: arrayData,//提交时需要strData属性,也可以arrayData属性

                success: function (msg) {

                    console.log(msg);

                }

            });

        });

 

 

方法二:

 

   //通过$.get()方法从控制器中获取数据

        $("#btnGetData1").click(function () {

            //$.get(url,callback)

            $.get("/jquery/PersonData", function (data) {

                //data 控制器中PersonData方法返回一个json格式的字符串

                console.log(data);

                //JSON.parse(json格式的字符串)转换为js对象

                data = JSON.parse(data);

                console.log(data);

                $("#txtName").val(data.name);//val()方法

                $("#cboSex").val(data.sex);

                $("#txtAddress").val(data.address);

           // }, "json");

           });

        });

        //$.ajax({参数配置})

        //$.ajax({

        //    type: 'get',

        //    url: "/Ajax/personData",

        //    dataType: 'json',

        //    success: function (data) {

 

        //    }

        //});

 

 

 

  //通过$.get()方法将试图中的form表单数据提交到控制器的方法中

        $("#btnGetData2").click(function () {

                var txtName = $("#txtName").val();

                var cboSex = $("#cboSex").val();

                var txtAddress = $("#txtAddress").val();

 

            $.get("/jquery/getDataByEntityClass", {

                name: txtName,

                sex: cboSex,

                address: txtAddress,

            }, function (msg) {

                alert(msg);

            });

        });

 

 

 

方法三:

//通过$.post()方法从控制器中获取数据

        $("#btnPostData1").click(function () {

            $.post("/jquery/PersonData1", function (data) {

                //data 控制器中PersonData方法返回的一个json格式的字符串

                console.log(data);

                data = JSON.parse(data);

                console.log(data);

 

                $("#txtName").val(data.name);

                $("#cboSex").val(data.sex);

                $("#txtAddress").val(data.address);

            });

        });

 

 //通过$.post()方法将视图中的form表单数据提交到控制器的方法中

        $("#btnPostData2").click(function () {

 

            var formData = $("#frm").serializeArray();

            console.log(formData);

 

            $.post("/jquery/getDataByEntityClass", formData, function (msg) {

                console.log(msg);

            });

        });

</script>

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进