Question

我在更改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;
        }
    }
});

Answer 1

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

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

您应该在success函数中移动代码，以便在AJAX请求完成时全部执行。

Answer 2

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

$('#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!');
        }
    });
});

Answer 3

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

开始

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

在你的ajax的成功回调中。

Answer 4

如果您在ajax通话中使用datatype: 'json'，则无需执行json = JSON.parse(json);。
关于将所有代码放在success回调函数中的其他答案。

Div内容在第一次点击时不会改变

4 个答案: