使用jQuery实现post获取与提交

 

1. 我们用bootstrap来布局就不用写样式，所以我们先引入bootstrap框架，放一个div类名为container，再在里面写form表单，在表单里我们先放四个div分别放姓名，性别和地址还有按钮，并且给他们两个相同的类为form-group form-row，有了这两个类就把样式都写好了。
2. 在每个的div中放一个label标签（除了放按钮的div），我们把文本放在label标签内，并且给label标签三个相同的类form-check-label col-1 text-center。
3. 在姓名的div内再放一个input标签，让它里面的type属性为text，name属性为name，id为name，class为form-control col-11。
4. 在性别的div内再放一个select标签，让它里面的name属性为sex，id为sex，class为form-control col-11，在select标签里面放三个option标签，里面的文本分别为请选择，男，女，并且他们对应的value值分别为0，男，女。
5. 在地址的div内再放一个text area标签，让它里面的name属性为address，id为address，class为form-control col-11。
6. 在最后一个div内再放八个button标签，他们的id分别为btnAjax，btnAjaxPost，btnGet1，btnGet2，btnPost1，btnPost2，btnGetJson1，btnGetJson2，其他样式都差不多，就是颜色不同 。注：οnsubmit="return false;" 禁止表单自动提交，from表单有这个属性只有JavaScript的方法才能实现手动提交，jQuery不能，反之都能实现手动提交

 

我们来写 一下post获取

1.我们给第五个button按钮绑定点击事件，$("#btnpost1").click(function () {}),再用$美元符号调用get这个方法，它里面有三个参数。

2.第一个为请求的地址，/Ajax/index5，index5是控制器中的方法

 public ActionResult index5() {

 string str = "{\"name\":\"丁总\",\"sex\":\"女\",\"address\":\"江西丰城\"}";return Json(str);

 //return json(str,JsonRequestBehavior.AllowGet);            }

3.第二个为回调的函数，需要传一个参数（自定义）我们在控制台输出一下这个参数，结果为：{name: "丁总", sex: "女", address: "江西丰城"}，是一个对象，我们再把得到的值绑定到input标签上，就是把对象里的值赋值给他们在这之前我们要将json格式的字符串转化成js对象

data = JSON.parse(data);

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

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

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

 

我们来写post提交

1. 我们给第六个button按钮绑定点击事件，$("#btnpost2").click(function () {})，首先我们先将表单序列化成数组，并且赋值给我们声明的一个变量form。
2. 再用$符号调用post这个方法，他有三个参数。
3. 第一是地址，/Ajax/index4，index4也是控制器中的方法，

  public ActionResult index4(dd d)

        {

            string ss = d.name + d.sex + d.address;

            return Content(ss);

        }

        public class dd

        {

 

1. 我们用bootstrap来布局就不用写样式，所以我们先引入bootstrap框架，放一个div类名为container，再在里面写form表单，在表单里我们先放四个div分别放姓名，性别和地址还有按钮，并且给他们两个相同的类为form-group form-row，有了这两个类就把样式都写好了。
2. 在每个的div中放一个label标签（除了放按钮的div），我们把文本放在label标签内，并且给label标签三个相同的类form-check-label col-1 text-center。
3. 在姓名的div内再放一个input标签，让它里面的type属性为text，name属性为name，id为name，class为form-control col-11。
4. 在性别的div内再放一个select标签，让它里面的name属性为sex，id为sex，class为form-control col-11，在select标签里面放三个option标签，里面的文本分别为请选择，男，女，并且他们对应的value值分别为0，男，女。
5. 在地址的div内再放一个text area标签，让它里面的name属性为address，id为address，class为form-control col-11。
6. 在最后一个div内再放八个button标签，他们的id分别为btnAjax，btnAjaxPost，btnGet1，btnGet2，btnPost1，btnPost2，btnGetJson1，btnGetJson2，其他样式都差不多，就是颜色不同 。注：οnsubmit="return false;" 禁止表单自动提交，from表单有这个属性只有JavaScript的方法才能实现手动提交，jQuery不能，反之都能实现手动提交

我们来写 一下post获取

1.我们给第五个button按钮绑定点击事件，$("#btnpost1").click(function () {}),再用$美元符号调用get这个方法，它里面有三个参数。

2.第一个为请求的地址，/Ajax/index5，index5是控制器中的方法

 public ActionResult index5() {

 string str = "{\"name\":\"丁总\",\"sex\":\"女\",\"address\":\"江西丰城\"}";return Json(str);

 //return json(str,JsonRequestBehavior.AllowGet);            }

3.第二个为回调的函数，需要传一个参数（自定义）我们在控制台输出一下这个参数，结果为：{name: "丁总", sex: "女", address: "江西丰城"}，是一个对象，我们再把得到的值绑定到input标签上，就是把对象里的值赋值给他们在这之前我们要将json格式的字符串转化成js对象

data = JSON.parse(data);

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

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

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

我们来写post提交

1. 我们给第六个button按钮绑定点击事件，$("#btnpost2").click(function () {})，首先我们先将表单序列化成数组，并且赋值给我们声明的一个变量form。
2. 再用$符号调用post这个方法，他有三个参数。
3. 第一是地址，/Ajax/index4，index4也是控制器中的方法，

  public ActionResult index4(dd d)

        {

            string ss = d.name + d.sex + d.address;

            return Content(ss);

        }

        public class dd

        {

            public string name { get; set; }//属性

            public string sex { get; set; }

            public string address { get; set; }

       }

4.第二是我们事先准备的数组。

5.第三又是我们的回调函数，还是要传参数，并且再控制台输出。