使用jQuery实现Ajax获取与提交

 

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不能，反之都能实现手动提交
7. 接下来我们来写jQuery

 

这个是$.ajax()获取，我们给第一个按钮绑定点

$("#btnAjax").click(function () {})，接下来我们用$这个美元符号来调用ajax这个方法，有几个参数。

1. 第一个type，这个是指请求的方式，我们这里写的是post。
2. 第二url，这个是指请求的地址，我们这里是写/Ajax/index2，这个index2是我们在控制器写的方法，

public ActionResult index2()

  {

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

 return Content (str);

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

}

4.第三个dataType，这个是指预期服务器返回的数据类型，它有六个值，

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

我们这里让它的值为json设置他为json他就会返回JSON 数据 就相当于a = JSON.parse(a);就是说我们用了这句代码在回调函数中就不用将json格式的字符串转化成js对象了。

1. 第四个为success ，它的值为一个回调函数，意思为成功是调用的函数，这个函数需要传一个参数，我们先在控制台输出一下这个参数，输出{name: "丁总", sex: "女", address: "江西丰城"}这一个对象，我们现在要把它绑定在input标签上，所以我们把那个对象中的值赋值给input标签，$("#name").val(a.name);

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

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

 

 

1. 我们来写一下Ajax提交，首先我们给第二个button按钮绑定点击事件$("#btnAjaxPost").click(function () {})我们要做一些判断，来判断他是否符合要求，所以我们要获取input标签里面的value值，我们先声明三个变量name，sex，address，分别来获取姓名，性别和地址的value值的，再写一个if语句来进行判断，，如果当变量name不等于空，且变量sex不等于0，且变量address不等于空的情况下再来执行下面的代码。
2. 我们用三种方法来提交，第一种，使用字符串拼接的方法，我们先声明一个变量str来放置字符串var str = "a=" + name + "&b=" + sex + "&c=" + address;第二种将表格内容序列化为字符串，我们先声明一个变量str来放置字符串，这里我们先获取form表单，它里面有一个serialize()这个方法var str = $("#form").serialize();第三种将表格内容序列化为数组对象，我们先声明一个变量str来放置字符串，这里我们先获取form表单，它里面有一个serializeArray ()这个方法var str = $("#form").serializeArray();
3. 我们先在控制台输出一下第二种方法结果为name=%E4%B8%81%E6%80%BB&sex=%E5%A5%B3&address=%E6%B1%9F%E8%A5%BF%E4%B8%B0%E5%9F%8E，有乱码是因为我们写代码里面有中文。
4. 用$美元符号调用ajax方法，里面有几个参数。
5. 第一个type为提交的方式，这里是post。
6. 第二个url为提交的地址，这里为/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; }

       }这个类是自己命名的，里面的代码都是属性。

1. 第三个data是指发送到服务器的数据。将自动转换为请求字符串格式，我们把变量str作为它的值。
2. 第四个success是指当请求之后调用。传入返回后的数据，以及包含成功代码的字符串，这里它的值为一个回调函数，这个函数需要传一个参数，我们在这个函数内用console.log(b);将参数在控制台输出一下结果为：丁总女江西丰城
3. 最后不满足if语句的就让他弹出提示框。