`

jQuery的ajax传参巧用JSON

阅读更多

jQuery的ajax调用很方便,传参的时候喜欢用Json的数据格式。比如:

JavaScript代码,增加一个评论
function AddComment(content) {
    var threadId = $("#span_thread_id").html();
    var groupId = $("#span_group_id").html();
    var groupType = $("#span_group_type").html();
    var title = $("#thread_title").html();
    var content = content.replace(/\x22/g,'"');
    $.ajax({
        url: '/WebService/GroupService.asmx/AddThreadComment',
        data: '{threadId:' + threadId + ',groupId:' + groupId + ',groupType:' + groupType + ',title:"' + title + '",content:"' + content + '"}',        type: 'post',
        dataType: 'json',
        contentType: 'application/json;charset=utf-8',
        cache: false,
        success: function(data) {
            //根据返回值data.d判断是不是成功
        },
        error: function(xhr) {
            //中间发生异常,查看xhr.responseText
        }
    });
}

这中间最麻烦,最容易出错的也是拼接Json字符串,字符型参数的值要添加引号,而且对于用户输入的文本字段要对',/等进行特殊处理

意外的机会,上司给我推荐了一种新的方法,看下面代码:

JavaScript代码,巧用JSON传参数
function AddComment(content) {
    var comment = {};
    comment.threadId = $("#span_thread_id").html();
    comment.groupId = $("#span_group_id").html();
    comment.groupType = $("#span_group_type").html();
    comment.title = $("#thread_title").html();
    comment.content = content;
    $.ajax({
        url: '/WebService/GroupService.asmx/AddThreadComment',
        data: $.toJSON(comment),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json;charset=utf-8',
        cache: false,
        success: function(data) {
            //根据返回值data.d处理   
        },
        error: function(xhr) {
            //中间发生异常,具体查看xhr.responseText
        }
    });
}

直接用$.toJSON(对象)即可;
jQuery的JSON插件:http://code.google.com/p/jquery-json/
2
2
分享到:
评论

相关推荐

    jQuery的ajax传参巧用JSON使用示例(附Json插件)

    本文将介绍如何在jQuery的ajax方法中巧妙使用JSON数据格式进行参数传递,并提供了一个使用JSON插件的示例。 首先,我们来看一个常规的使用JSON格式传递参数的ajax调用示例。在这个示例中,首先需要手动构建一个JSON...

    jsp中利用jquery+ajax在前后台之间传递json格式参数

    在本文中,我们将深入探讨如何在JavaServer Pages (JSP) 中使用jQuery和Ajax来传递JSON格式的参数。这是一个常见的需求,特别是在构建交互性强、响应迅速的Web应用程序时。通过这种方式,前端和后端可以有效地交换...

    jquery的get()方法ajax传值php实例

    本实例将深入探讨如何使用jQuery的`get()`方法进行Ajax请求,将数据传递到PHP服务器,并接收JSON格式的响应。让我们逐一解析这个过程。 首先,`get()`是jQuery提供的一个Ajax方法,用于向指定URL发送异步GET请求。...

    jQuery + Ajax + json 级联

    ### jQuery + Ajax + JSON 级联:深入解析与应用 在现代Web开发中,级联选择器(Cascade Selectors)是一种常见的用户界面设计模式,主要用于处理多层级的数据选择,如国家-省份-城市的选择。本文将深入探讨如何...

    jquery ajax 向后台传递数组参数示例

    以上就是使用jQuery AJAX向后台传递数组参数的完整过程,包括JSON序列化和反序列化的处理。请注意,这只是一个基础示例,实际项目中可能需要考虑更多的错误处理和数据验证。同时,不同的后端框架可能有内置的JSON...

    asp.net使用jquery ajax 小例子

    1. 在客户端使用jQuery的`$.ajax()`方法发起请求。 2. 定义后台处理程序(.ashx)或Web服务方法来接收和处理请求。 3. 通过HTTP响应返回数据,通常是JSON格式。 4. 在`success`回调中处理服务器返回的数据。 通过...

    jQuery使用ajax传递json对象到服务端及contentType的用法示例

    本文实例讲述了jQuery使用ajax传递json对象到服务端及contentType的用法。分享给大家供大家参考,具体如下: 0、一般情况下,通过键值对的方式将参数传递到服务端 0.1 客户端代码: $.ajax({ url: 'TestHandler....

    $.ajax json数据传递方法.docx

    $.ajax json 数据传递方法是使用 jQuery 库实现的异步数据传递方法,通过将 JSON 数据封装在 $.ajax 对象中,并将其作为参数传递给服务器端脚本,以实现客户端和服务器端之间的数据交互。 在前台代码中,首先定义了...

    springmvc3+json参数传递后台接收json参数

    例如,使用jQuery的`$.ajax`或`$.post`函数,可以将表单数据转化为JSON并发送: ```javascript var formData = { "name": "John", "age": 30, "city": "New York" }; $.ajax({ url: "/saveUser", type: ...

    jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

    在 Ajax 传参方面,jQuery 提供了 `.serialize()` 方法,它可以将表单中的所有元素(包括选中的选项、输入值等)转换为一个 URL 编码的字符串,适合于作为 Ajax 请求的 `data` 参数。例如: ```javascript var ...

    ajax中data传参的两种方式分析

    在使用AJAX进行数据交互时,`data`参数是传递数据到服务器的关键部分。本篇文章将详细探讨AJAX中`data`传参的两种主要方式:POST和GET。 1. **POST方式**: POST方式通常用于向服务器提交大量数据或敏感信息,因为...

    ajax json示例

    **描述分析:** 描述中的“在vs2010下的一个完整的通过ajax 在前后台传参json的格式”表明这是一个在Visual Studio 2010环境下开发的项目,它演示了如何使用AJAX技术将JSON格式的数据作为参数从客户端(前端)传递到...

    解决SpringMVC接收不到ajaxPOST参数的问题

    但是,在使用SpringMVC时,经常会遇到ajax POST请求参数接收不到的问题。本文将探讨解决这个问题的方法和原因。 问题描述 在使用ajax POST请求时,经常会遇到参数接收不到的问题。例如,在Java后台使用@...

    jquery ajax异步提交表单数据的方法

    本文将详细介绍如何使用jQuery的Ajax方法实现异步提交表单数据。 首先,异步提交表单意味着用户在提交表单时不需要重新加载整个页面,可以提高用户体验。在没有使用Ajax时,表单提交一般会触发页面的完全刷新。使用...

    jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法

    在本文中,我们将探讨如何使用jQuery和Ajax技术来实现一个基本的电商应用功能,即从本地数据源加载商品列表,并在用户点击时跳转到商品详情页。首先,我们需要了解jQuery和Ajax的基本概念。 jQuery是一个广泛使用的...

    JQuery.form表单提交参数详解.txt

    ### JQuery Form 插件中的 `ajaxForm()` 和 `ajaxSubmit()` 方法详解 #### 一、引言 在 Web 开发中,使用 AJAX 进行异步表单提交是一种常见的技术手段,它允许开发者无需重新加载整个页面即可提交数据并接收响应...

    ajax 异步 拼接表

    本文将通过一个具体的案例——“ajax异步拼接表”,来详细介绍如何使用AJAX进行异步传参获取JSON,并循环拼接表头和数据进行展示。 #### 二、案例背景及需求分析 假设我们有一个包含服务记录的数据库表,每次点击...

    Ajax程序经典小例子,《Ajax入门教程》代码

    这种技术的核心是JavaScript,XML虽然在早期是数据传输格式,但现代Ajax应用更常使用JSON。Ajax的使用极大地提升了用户体验,因为它减少了用户等待时间,使得交互更为流畅。 **Ajax工作原理** Ajax的工作流程主要...

Global site tag (gtag.js) - Google Analytics