几种提交数据的方法

 

请求页面流程：输入网址，请求控制器->返回视图（ 浏览器页面=视图） ，浏览器解析显示页面  

html，css，js组成的显示页面=视图，视图没有数据交互的能力，数据交互（就是让他从数据库拿数据出来）是控制器和js干的事情

数据库 ，后台（控制器），页面（前端），这三者是分开的，

控制器跟页面交互，控制器跟数据库交互，数据库不跟页面直接交互。

 

 

ajax请求流程：js请求控制器，控制器返回数据给视图（浏览器页面），js处理返回的数据

 

原理：

用jQuery实现Ajax

        /*       

jQuery.ajax({settings});

type:类型，"POST"或"GET",默认值为"GET"

url: 发送请求的地址

async:设置异步，(默认: true) 默认设置下，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设置为 false。注意，

同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

data:是一个对象，连同请求发送到服务器的数据

dataType:预期服务器返回的数据类型，如果不指定，

jQuery将自动根据http包MIME信息来智能判断，一般我们采用json格式，可以设置为"json"

success:是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串

error:是一个方法，请求失败是调用此函数，传入XMLHttpRequest对象

 

 

 

二.$.get提交

jQuery.get()以GET方式从服务器获取数据（从controller传数据给到view(数据回填)）

例子:

 

$( "#btnget" ).click( function () { //get接收的是js对象

$.get( "/jQueryAjax/getPersonInfor" , // 发送请求地址(url)

这里 如果控制器有参数也可以用花括号{里面写参数}    { 控制器参数1： 视图参数1，参数2：视图参数2}   只是get和post提交不一样，写法一样， 

function (data) {// callback:载入成功时回调函数。

 console.log( typeof (data));

     var data = JSON.parse(data); //json转换成js

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

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

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

 });

});  

 

 

原理：  

语法：jQuery.get(url, [data], [callback], [type])

描述：通过远程 HTTP GET 请求载入信息。 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数说明： get和post写法可以一样，因为他们都有下面四个参数 url，data,callback,type

   url:待载入页面的URL地址

   data:待发送 Key/value 参数。

   callback:载入成功时回调函数。

   type:返回内容格式，xml, html, script, json, text, _default。

 

注意 ： get传送的数据量较小，不能大于2KB。 还会把 参数 直接暴露在URL上 。 。

一般都是用post。 post传送的数据量较大，一般被默认为不受限制。

            

三.$.post提交

控制器方法：

  public ActionResult postPersonInfor( FormCollection form)

      {

       string name = form[ "name" ];

        string sex = form[ "sex" ];

        string address = form[ "address" ];

       return Content(name + "&" + sex + "&" + address);

       //(string)返回字符串 我给你发过只要有引号就是字符串

       }

例子：

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

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

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

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

 $.post( "/jQueryAjax/postPersonInfor" , // 发送请求地址(url)

    { //这里面的数据是 待发送 Key/value （ 键值对 ）参数

        name: txtName,

       sex: cboSex,

       address: address              

    }，

上面红色部分要是 没有参数 就可以不用花括号这一段   { 控制器参数1： 视图参数1，参数2：视图参数2}   

只是get和post提交不一样，写法一样， 

      function (data) {这里是 发送成功时回调函数

       document.write(data);

     });

  });

})

 

注意： post是.ajax的简写，他只管post出去，如果想写更复杂的 回调函数 ，推荐使用.ajax

原理：

jQuery.post()以POST方式从服务器发送数据（从View层获取数据（新增））

            

语法：jQuery.post(url, [data], [callback], [type])

描述：通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。

如果需要在出错时执行函数，请使用 $.ajax。

   参数说明：

      url:发送请求地址。

      data:待发送 Key/value （ 键值对 ）参数。

      callback:发送成功时回调函数。

      type:返回内容格式，xml, html, script, json, text, _default。

            

 

四：form表单提交

例子：

     第一种 ：通过获取id提交

 

控制器方法：

public ActionResult formAction( FormCollection form)

 {

string name = form[ "txtName"];

string sex = form[ "cboSex"];

  string address = form[ "txtAddress"];

return Content(name+ "&"+sex+ "&"+address); //Content(string)返回字符串

//FormCollection用来在controller中获取页面表单元素的数据。

它是表单元素的集合，包括<input type="submit" />元素。

 }

视图：

<button class="btn btn-primary col-md-offset-4"  id="btnSubmit">表单提交</button>

 

手动提交

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

  //第一种获取表单的方式

 $( "#myform").attr({ "method": "post", "action": "/jQueryAjax/formAction" });

});

 

 

 

第二种：

这种是用Request.Form["txtName"]， 控制器["值"]跟页面name一致，获取页面表单name值，

实质也是对应，页面的名称跟控制获取的名称要一样

 

控制器方法： Request.Form["txtName"];//txtName为表单元素中name属性的值

  public ActionResult formAction1()

        {

          string name = Request.Form[ " txtName "];

           string sex = Request.Form[ "cboSex"];

           string address = Request.Form[ "txtAddress"];

          return Content(name + "&&" + sex + "&&" + address);

        //Content(string)返回字符串

        }

 

视图:

<form class="form-horizontal" action="/jQueryAjax/formAction1"  method="post">

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

</form>

  < button class ="btn btn-primary col-md-offset-4" type ="submit" >表单提交 </ button >

 

 

第三种： name值跟 控制器的参数名对应， 如果控制器的参数是一个vo，那就name值跟vo里面的属性名称对应

 

1.数据库 ，后台（控制器），页面（前端），这三者是分开的，控制器跟页面交互，

控制器跟数据库交互，数据库不跟页面直接交互。

2.所以： 页面的参数 只 要跟控制器的对应。 控制器 要跟数据库交互，

那 控制器 调用数据 的 参数 就 要跟 数据库 的 字段对应。 （重要）

3.一般我们 数据库 的 字段名 ， 控制器的 方法名： public   ActionResult fangfaming(){ } ，

前端请求的 参数名 都是大致一样的，但是只要知道三者的关系

（三者关系看上一个第2条：页面，控制器，数据库），你就不会吧参数搞混

 

控制器方法：

  public ActionResult getAction( string duiyinkzq, string cboSex, string txtAddress)

      {

        string name = duiyinkzq;

      string sex = cboSex;

      string address = txtAddress;

     return Content(name + "&&&" + sex + "&&&" + address);

      //Content(string)返回字符串

       }

页面：

  < form class ="form-horizontal" action ="/jQueryAjax/getAction" method ="get">用post和get都可以，post安全一点，看个人

  < input class ="form-control" type ="text" value ="" name =" duiyinkzq " id ="txtName" />

  < button class ="btn btn-primary col-md-offset-4" type ="submit" >表单提交 </ button >

</ form >

 

原理：

 

 

 

 

五： $.getjson（“url”,{前面控制器参数：后面js参数}，

function （ data ） callback 回调函数）{ }

 

 

控制器方法：

public ActionResult selectInfor() //查找员工信息

{

//linq to sql

           

var employee = ( from tbEmp in myUserEntities.SYS_Employee

    select new

    {

        tbEmp.EmployeeID, //员工ID

        tbEmp.EmployeeCode, //员工编码

        tbEmp.EmployeeName //员工姓名

    }).ToList();

return Json(employee, JsonRequestBehavior.AllowGet);

}   

 

 

例子： 我只是查询了数据库，变得是js写法，

提交方式，1.url，2. 参数（有参数就写，没有就直接是url，和回调函数）

3.回调函数都是要有的，提交的几种基本都一样的写法

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

     $. getJSON( "/jQueryAjax/selectInfor",

         function (data) {

          console.log(data);

          console.log( typeof (data));

          $.each(data, function (i) {

//js里面只有each，没有foreach，通过表单的数据把他们一个一个抽取出来，就可以拿到全部数据

            str += "员工ID：" + data[i].EmployeeID + "  

            员工编码：" + data[i].EmployeeCode + "  

            员工姓名：" + data[i].EmployeeName + "<br/>";

           $( "#result").html(str);

         });

      });

  });

 

原理：

jQuery.getJSON()的异步加载

 

    语法：jQuery.getJSON(url, [data], [callback])

    描述：通过 HTTP GET 请求载入 JSON 数据。

    参数说明：

        url:发送请求地址。

        data:待发送 Key/value 参数。

        callback:载入成功时回调函数。

 

跟get和post差不多，这个只有三个参数，少了 type:返回内容格式，xml, html, script, json, text, _default。