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

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回调函数的其他答案是什么。