-1

我在更改 div 的内容时遇到问题。我首先进行 ajax 调用并从服务器接收 JSON 数组。到目前为止，一切都很好。然后，我想将几​​个 div 的内容更改为我从服务器收到的内容。问题是第一次点击时内容不会改变。每次响应都可以，我已经检查了 Fiddler 并在我的代码中，我收到了正确的响应。但是，为什么我的页面上的 div 没有随着第一次点击而改变 为什么我每次都必须点击两次？我花了几个小时弄清楚这一点，尝试了一切，似乎没有什么合乎逻辑的。这是我的代码（项目是 MVC 4）：

$('#btnsearch').click(function ()
{
    var searchStr = $('#txtSearch').val();
    var noOfPages = 1;

    $.ajax({
        type: "POST",
        datatype: 'json',
        url: $('#btnsearch').data('request-url'),/*URL from Razor's page*/
        data: { pageNo: noOfPages, searchString: searchStr },/*MVC 4 call*/
        success: function (jsontext)
        { 
            $('#hiddenSearchResult').val(jsontext);
        },
        error: function ()
        {
            alert('Error when searching!');
        }
    });

    var json = $('#hiddenSearchResult').val();
    if (json.length === 0){ alert('result is empty!');
    return;}/*with empty json, parsing throws error*/
    json = JSON.parse(json);
    if (json.Content == undefined) return;

    for (var i = 0; i < json.Content.length; i++) {
        switch (i) {
            case 0:

                $('#snippetsdivinner').html(json.Content[i].ContentString);
                break;
            case 1:

                $('#snippetsdivinner1').html(json.Content[i].ContentString);
                break;
            case 2:

                $('#snippetsdivinner2').html(json.Content[i].ContentString);
                break;
            case 3:

                $('#snippetsdivinner3').html(json.Content[i].ContentString);
                break;
        }
    }
});
4

4 回答 4

3

之后的代码var json = $('#hiddenSearchResult').val()在 AJAX 请求启动后立即执行，但在完成之前执行，因此当时$('#hiddenSearchResult')尚未填充。

当您第二次单击该按钮时，它已由 AJAX 请求的完成填充，因此您$.ajax执行后的代码将按预期执行。

您应该将代码移动到success函数内，以便在 AJAX 请求完成时执行所有代码。

于 2013-08-08T11:53:16.340 回答
1

如果您datatype: 'json'在 ajax 调用中使用，则不必执行json = JSON.parse(json);.
以及其他答案所说的将所有代码放入success回调函数中。

于 2013-08-08T11:58:12.797 回答
1

它是异步的，你需要等到你有结果

$('#btnsearch').click(function ()
{
   var searchStr = $('#txtSearch').val();
   var noOfPages = 1;

  $.ajax({
    type: "POST",
    datatype: 'json',
    url: $('#btnsearch').data('request-url'),/*URL from Razor's page*/
    data: { pageNo: noOfPages, searchString: searchStr },/*MVC 4 call*/
    success: function (jsontext)
    { 
        if (jsontext.length === 0){ alert('result is empty!');
           return;
        }/*with empty json, parsing throws error*/
       var json = JSON.parse(jsontext);
       if (json.Content == undefined) return;

        for (var i = 0; i < json.Content.length; i++) {
        switch (i) {
            case 0:
                $('#snippetsdivinner').html(json.Content[i].ContentString);
                break;
            case 1:
                $('#snippetsdivinner1').html(json.Content[i].ContentString);
                break;
            case 2:
                $('#snippetsdivinner2').html(json.Content[i].ContentString);
                break;
            case 3:
                $('#snippetsdivinner3').html(json.Content[i].ContentString);
                break;
        }
    }
        },
        error: function ()
        {
            alert('Error when searching!');
        }
    });
});
于 2013-08-08T11:53:35.357 回答
1

您可能还需要将所有代码从

var json = $('#hiddenSearchResult').val();

在您的 ajax 的成功回调中。

于 2013-08-08T11:54:24.533 回答