Question

我对此完全陌生，如果我没有正确解释，请道歉。

我想以json格式将一些数据发布到休息服务。我试图在一个简单的.cshtml（razor）页面中使用JQuery。

我的json字符串看起来像这样：

{
   "ListRequest":{
      "Values":[
         {
            "Name":"SC",
            "Value":"PRO001"
         },
         {
            "Name":"PC",
            "Value":"Z0R14"
         }
      ]
}

}

我需要将表单中的2个值传递给此字符串，然后将其发布，但我不知道如何在javascript中声明它，然后将其发布到我的$ .post函数。

我的HTML看起来像这样：

<form action="/" id="getListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get List">
</form>

我以为我只是宣布一个var：

var jsonText = '{"ListRequest":{ "Values":[' +
'{"Name":"SC", "Value":"' + $form.find("input[name='txtSC']").val() + '"},' +
'{"Name":"PC","Value":"' + $form.find("input[name='txtPC']").val() + '"}]}}';

这是处理这个问题的正确方法吗？

然后我有我的'post'代码进行测试：

var posting = $.post( url, term);

posting.done(function (data) {
    var content = $(data).find("#content");
    $("#result").empty().append(content);
});

但每当我调用它时，它会将这两个值作为查询字符串的一部分，而不是在网址中看不到这些数据的实际帖子。

http://localhost/WebTest/WebDataService.svc/GetList?txtSC=brc001&txtPC=12345

有人可以告诉我如何解决这个问题吗？

感谢。

更新

以下是我的测试页面中的完整代码，因为它仍然不适合我。我只是注意到没有触发提交事件。它似乎是自动放置文本框和值，因为它们是表单的一部分，但我的事件肯定不会触发，因为我只是评论了所有代码并发出警报（'test'）;它没有出现。

有什么想法吗？

感谢。

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>

<script type="text/javascript">

// Attach a submit handler to the form
$("#getListForm").submit(function (event) {
    event.preventDefault();

    //var jsonText = '{"ListRequest":{ "Values":[' +
    //       '{"Name":"SC", "Value":"' + $form.find("input[name='txtSC']").val() + '"},' +
    //       '{"Name":"PC","Value":"' + $form.find("input[name='txtPC']").val() + '"}]}}';


    var obj = {
        ListRequest: {
            Values: [
                 {
                     Name: "SC",
                     Value: $('input[name="txtSC"]').val()
                 },
                 {
                     Name: "PC",
                     Value: $('input[name="txtPC"]').val()
                 }
            ]
        }
    }


    var jsonObj = JSON.stringify(obj);

    var $form = $(this), term = jsonText, url = 'http://localhost/WebTest/DataService.svc';

    $.post(url + '/GetList', jsonObj,
    function (data, status) {
    alert("Data: " + data + "\nStatus: " + status);
    });

    // Send the data using post
    //var posting = $.post( url, term);
    //posting.done(function (data) {
    //    var content = $(data).find("#content");
    //    $("#result").empty().append(content);
    //});

});
</script>

@{
    ViewBag.Title = "Json Test";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>


<form id="getListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get List">
</form>

<div id="result"></div>

感谢。

更新

最新代码，我更新了使用jsonObj的术语，并按照建议将我的代码放在$（document）.ready块中：

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function () {
    // Attach a submit handler to the form
    $("#getDocumentListForm").submit(function (event) {

        event.preventDefault();
        alert('test1');

        var obj = {
            ListRequest: {
                Values: [
                     {
                         Name: "SC",
                         Value: $('input[name="txtSC"]').val()
                     },
                     {
                         Name: "PO",
                         Value: $('input[name="txtPC"]').val()
                     }
                ]
            }
        }


            var jsonObj = JSON.stringify(obj);

            var $form = $(this), term = jsonObj, url = 'http://localhost/WebTest/DataService.svc';

            alert(term);
            alert(url);

            $.post(url + 'GetList', jsonObj,
            function (data, status) {
                alert("Data: " + data + "\nStatus: " + status);
            });

            //Tried posting using term but no luck. Same problem.
            //$.post(url + 'GetList',
            //function (data, status) {
            //    alert("Data: " + data + "\nStatus: " + status);
            //});

            // Send the data using post
            //var posting = $.post(url, term);
            //posting.done(function (data) {
            //    //var content = $(data).find("#content");
            //    //$("#result").empty().append(content);
            //    alert(data)
            //});

            alert('test2');
        });
    });

</script>

@{
    ViewBag.Title = "Test";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>


<form id="getDocumentListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get Document List">
</form>

<div id="result"></div>

关于此问题的最终更新

确定：

不要使用IE11与JQUERY，以及最少的JQUERY 2.1.1！不知道它如何与IE的其他版本一起使用。
总是与其他浏览器一起测试
请务必将您的JQUERY SRC设置为正确的HTTP或HTTPS，取决于您使用的内容。

就是这样。

Answer 1

我想那里发生了什么，你试图传递一个名为term而不是jsonText的未定义的变量，所以javascript代码正在抛出未被捕获的异常会被忽略，您可以从form元素中获得正常操作。

您应该传递正确的数据。而且，了解JSON.stringify可能会为您节省大量时间和麻烦;）。您可以像这样构建对象：

var obj = {
    ListRequest: {
        Values: [
             { 
                 Name:  "SC",
                 Value: $('input[name="txtSC"]').val()
             },
             {
                 Name:  "PC",
                 Value: $('input[name="txtPC"]').val()
             }
        ]
    }
};

var jsonObj = JSON.stringify(obj);

我在您的代码中可以想到的另一个缺陷是，您已将AJAX绑定到提交按钮上的click事件或onsubmit事件，并且您不是{{3 }} 荷兰国际集团

修改

鉴于你发布的代码，你有几个错误：

您是否将代码打包到jQuery(document).ready()块？
您已注释掉jsonText，但仍将其分配给变量term，从而导致未捕获的异常。

修复这两件事，您的POST请求将正确完成。

另一方面，为什么地球上你使用的是jQuery 1.5版？

使用jquery发布json字符串时未触发事件

1 个答案:

修改