首页 > 其他分享 >jq ajax传递json对象到服务端及contentType的用法

jq ajax传递json对象到服务端及contentType的用法

时间:2024-02-29 15:11:23浏览次数:21  
标签:username contentType age jq json var userArr data 服务端

目录

 


回到顶部

0、一般情况下,通过键值对的方式将参数传递到服务端

0.1 客户端代码:

$.ajax({
    url: 'TestHandler.ashx',
    type: 'post',
    data: {
        name: "admin",
        age: 10
    },
    dataType: 'text',
    success: function (data) {
        alert(data);
    }
})

0.2 服务端代码:

public void ProcessRequest(HttpContext context)
{
    string bodyText = string.Empty;
    using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
    {
        bodyText = bodyReader.ReadToEnd();
    }

    string name= context.Request["name"].ToString();// "admin"
    string age = context.Request["age"].ToString();// "10"

    context.Response.ContentType = "text/plain";
    context.Response.Write(bodyText);// "name=admin&age=10"
}

0.3 在浏览器的网络中查看此次请求:

从上面的截图中可以看出,post请求,是将formdata中键值对用符号“&”相连,拼接成一个字符串,传递到服务端,服务端可以通过key来获取值,或从request的body中读取整个字符串;

回到顶部

1、ajax 传递复杂json对象到服务端

1.1 方法一:通过formdata传值,服务端通过key获取值;

客户端代码:

var user1 = {
    username: 'admin',
    age: 10
};
var user2 = {
    username: 'test',
    age: 11
};
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
    url: 'TestHandler.ashx',
    type: 'post',
    //contentType: 'application/json',
    //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
    data: {
        Users: JSON.stringify(userArr)
    },
    dataType: 'text',
    success: function (data) {
        alert(data);
    }
})

服务端代码:

public void ProcessRequest(HttpContext context)
{
    string contentType= context.Request.ContentType;// "application/x-www-form-urlencoded; charset=UTF-8"

    string users = context.Request["Users"].ToString();
    dynamic obj = JsonConvert.DeserializeObject(users);

    context.Response.ContentType = "text/plain";
    context.Response.Write(obj[0].username);// "admin"
}

1.2 方法二:通过formdata方式传值,服务端读取Request.InputStream;

前端代码:

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
    url: 'TestHandler.ashx',
    type: 'post',
    //contentType: 'application/json',
    //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
    data: JSON.stringify(userArr),
    dataType: 'text',
    success: function (data) {
        alert(data);
    }
})

服务端代码:

public void ProcessRequest(HttpContext context)
{
    string contentType= context.Request.ContentType;//"application/x-www-form-urlencoded; charset=UTF-8"
    string bodyText = string.Empty;
    using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
    {
        bodyText = bodyReader.ReadToEnd();// [{"username":"admin","age":10},{"username":"test","age":11}]
    }

    dynamic obj = JsonConvert.DeserializeObject(bodyText);

    context.Response.ContentType = "text/plain";
    context.Response.Write(obj[0].username);// "admin"
}

通过浏览器查看此次请求:

从图中可以看出,content-Type 为application/x-www-form-urlencoded,所以浏览器尝试将传输的数据解析成key-value的形式,但实际在ajax中的data中设置的是一个json字符串,无法解析成key-value的形式,故在服务端无法通过key来获取值;只能从Request.InputStream获取。
虽然通过Request.InputStream也能获取到想要的数据,但是在asp.net mvc项目中,还是有些点需要注意,下面我们去mvc项目中试下...

回到顶部

2、content-Type 对asp.net mvc项目的重要性

注:示例中服务端用的是 asp.net ApiController,如果使用普通的mvc controller,还有其他解决方案;

2.1 客户端代码:

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
    url: 'Test/PostUsers',
    type: 'post',
    data: JSON.stringify(userArr),
    dataType: 'text',
    success: function (data) {
        alert(data);
    }
})

2.2 服务端代码:

public class TestController : ApiController
{
    public string PostUsers( List<User> Users)
    {
        return Users.Count.ToString();// 0
    }
}
public class User
{
    public string username { get; set; }
    public int age { get; set; }

}

上面的代码中,客户端发送的是个json字符串,服务端中的变量Users是无法获取到前端传过来的json信息的;
那前端如何发送数据,后端就能这样获取数据呢?

2.3 解决方案:(设置contentType

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
    url: 'Test/PostUsers',
    type: 'post',
    contentType: 'application/json',
    //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
    data: JSON.stringify(userArr),
    //dataType: 'text',
    success: function (data) {
        alert(data);// 2
    }
})

可以看出,ajax中添加了contentType设置;
jq的ajax中,contentType 主要设置你发送给服务器的格式,dataType设置你收到服务器数据的格式。
在http 请求中,get 和 post 是最常用的。在 jquery 的 ajax 中, contentType都是默认的值:application/x-www-form-urlencoded,这种格式的特点就是,name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。如: wwwh.baidu.com/q?key=fdsa&lang=zh 这是get , 而 post 请求则是使用请求体,参数不在 url 中,在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。
键值对这样组织在一般的情况下是没有什么问题的,但是如果想传递复杂的json,可以将contentType设置为application/json,我们在 ajax 传递复杂JSON数据时,用 JSON.stringify序列化后,然后发送,在服务器端接到然后用 JSON.parse 进行还原就行了,这样就能处理复杂的对象了。

2.4 其他的解决方案:(修改服务端代码)

方法一:直接读取Request.Content的值,然后反序列化;

public class TestController : ApiController
{
    //[Route("ddd")]
    //[HttpPost]
    public string PostUsers( )
    {
        string str = Request.Content.ReadAsStringAsync().Result;//[{"username":"admin","age":10},{"username":"test","age":11}]
        var users = JsonConvert.DeserializeObject<List<User>>(str);
        return users.Count.ToString();
    }
}
public class User
{
    public string username { get; set; }
    public int age { get; set; }
}

方法二:服务端使用普通的mvc控制器,前端使用key-value传值;

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
    url: 'Test1/PostUsers',
    type: 'post',
    data: { Users: userArr },
    success: function (data) {
        alert(data); // 2
    }
})
public class Test1Controller : Controller
{
    public string PostUsers( List<User> Users)
    {
        return Content(Users.Count.ToString());// 2
    }
}
public class User
{
    public string username { get; set; }
    public int age { get; set; }

}

通过浏览器查看该请求:

方法三:服务端使用普通的mvc控制器,前端使用key-value传值,value值要json化;

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
    url: 'Test1/PostUsers',
    type: 'post',
    data: { Users:JSON.stringify(userArr) },
    success: function (data) {
        alert(data); // 2
    }
})
JAVASCRIPT 复制 全屏
public class Test1Controller : Controller
{
    public ActionResult PostUsers()
    {
        string str = Request["Users"].ToString();
        var us = JsonConvert.DeserializeObject<List<User>>(str);
        return Content(us.Count.ToString());// 2
    }
}

标签:username,contentType,age,jq,json,var,userArr,data,服务端
From: https://www.cnblogs.com/itjeff/p/18044310

相关文章

  • 微信小程序的配置文件app.json的所有内容(十七)
    微信小程序的配置文件app.json的所有内容  {  "pages":["page1","page2","page3"], //页面路径列表,第一个页面路径为小程序初始页面  "window":{ //小程序窗口设置   //如果不进行额外的配置,小程序页面将使用默认的导航样式。"navigationStyle":"defau......
  • 【3.0】前端基础jQuery之进阶
    【一】操作标签【1】操作类(1)JS版本[1]classList.add()方法用于向元素添加一个或多个类名。如果指定的类名已存在,则不会添加。element.classList.add("class1","class2");[2]classList.remove()方法用于从元素移除一个或多个类名。如果指定的类名不存在,则不会......
  • 【2.0】前端基础jQuery之引入
    【一】jQuery基本语法【1】基本语法jQuery(选择器).action()【2】简写秉承jQuery宗旨,jQuery简写成$jQuery(选择器)---->$(选择器)【二】jQuery与原生JS代码比较将P标签内部的文本颜色改成红色<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-......
  • 【1.0】jQuery引入
    【一】什么是jQuery【1】概述jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Writeless,domore.“【2】小结jQuery内部封装......
  • sublime 格式化json
    sublime格式化json需要借助工具包prettyjson.具体步骤如下:打开sublime,使用快捷键shift+cmd+P打开输入框,然后输入install,选择installPackage然后输入:pretty,我们可以看到很多的格式化语言,选择JSON即可: 后台安装几秒到一分钟,打开sublimeText->preferences->packagesettin......
  • 在spark sql中解析json格式数据
    一、实际的sql语句:selectapp_id,event_time, event, spm_b_code, spm_c_code, spm_d_code, spm_biz_type, user_id, user_id_type, seat_code, spm_content_type, sourcefromxxx_yyy_zzztlateralview_json_tuplet(t.ext_props,......
  • Yaml与Json的对比
    YAML格式:server:#服务器配置port:8043#端口号为8043spring:#Spring配置datasource:#数据源配置url:jdbc:mysql://localhost:3306/hbs?serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull&autoReconnect=true&useSSL=false&failOv......
  • python3的json数据库-TinyDB效率篇
    安装了这个TinyDB库后,我突然想到一般来说python执行的速度并不算高,那这个库写文件速度如何呢?测试代码如下:fromtinydbimportTinyDBimporttime#创建数据库对象db=TinyDB('db.json')milliseconds1=int(time.time()*1000)db.insert({'type':'apple','count':......
  • python3的json数据库-TinyDB
    无意间看到TinyDB这个词汇,就去查了一下,就发现了它的官方网站这里然后就是按照他说的步骤去做。第1步安装  pip3installtinydb 安装成功后,创建一个文件名字叫做 test.py,输入下面的代码:fromtinydbimportTinyDB,Query#创建数据库对象db=TinyDB('db.json')#......
  • JavaScript 实现JSON 对象数组以某个属性进行分组处理
    JavaScript实现JSON对象数组以某个属性进行分组处理要在JavaScript中对JSON对象数组的某个属性进行分组处理,你可以使用一个对象来存储分组后的结果。下面是一个简单的示例,演示了如何对JSON对象数组中的某个属性进行分组处理:假设我们有一个JSON对象数组,每个对象都有ca......