Question

当我得到响应时，我有一个XMLhttpRequest我想绑定一个使用jQuery进行某些动画（标签）的div，但当我得到响应时显示标签，那么jQuery不起作用，但是如果我在使用Ajax的位置之外传输使用jQuery的块（div），那么它工作正常....

function searchLocations()
{
    var xmlhttp;
    var x, xx, txt;

    var search_text = document.getElementById("txtSearch").value;

    if(search_text != "")
    {
        if(window.XMLHttpRequest)
            xmlhttp = new XMLHttpRequest();
        else
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        xmlhttp.onreadystatechange = function()
        {
             if(xmlhttp.readyState == 1)
                 document.getElementById("search_locations_result").innerHTML="<p align='center' ><img src='account/images/working.gif'></p>";

             else if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
             {
                document.getElementById("status").innerHTML="";
                //document.getElementById("txtSearch").value="";
                x=xmlhttp.responseXML.documentElement.getElementsByTagName("Result");   
                txt="<table border='0' width='100%'>";

                for (i = 0; i < x.length; i++)
                {
                    txt = txt + "<div class=\"d"+id2+"\" style=\"display:none\">"+
"<div id='adv' class='usual'> "+
  "<ul>"+
    "<li><a href='#t13'>Tab 1</a></li> "+
    "<li><a href='#t23' class='selected'>Tab 2</a></li> "+
   " <li><a href='#t33'>Tab 3</a></li> "+
  "</ul> "+
  "<div id='t13' style='display: none; '>This is tab 1.</div> "+
  "<div id='t23' style='display: block; '>More content in tab 2.</div>" +
 " <div id='t33' style='display: none; '>Tab 3 is always last!</div> "+
"</div> "+

        "</div>";

        }// end for

                document.getElementById("search_locations_result").innerHTML=txt;               
             }
            }
        xmlhttp.open("GET","ajax_search_locations.php?name="+search_text+"&page="+page,true);
        xmlhttp.send();
        }
        else
            document.getElementById("status").innerHTML="";

    }

其中div通常使用jQuery：

$(document).ready(function() {
    $("div.usual ul").idTabs();
});

Answer 1

这是一个jQuery ajax调用。我简化了整个事情：

$.ajax({
    type: 'GET',
    url: 'ajax_search_locations.php',
    data: { name: $('txtSearch').val(),  page: page },
    dataType: 'json',
    complete: function(XMLHttpRequest, textStatus) {
    if (XMLHttpRequest.status === 200)
    {

    var txt= "<div class=\"d"+id2+"\" style=\"display:none\">"+
        "<div id='adv' class='usual'> "+
        "<ul>"+
         "<li><a href='#t13'>Tab 1</a></li> "+
         "<li><a href='#t23' class='selected'>Tab 2</a></li> "+
        " <li><a href='#t33'>Tab 3</a></li> "+
        "</ul> "+
        "<div id='t13' style='display: none; '>This is tab 1.</div> "+
        "<div id='t23' style='display: block; '>More content in tab 2.</div>" +
        " <div id='t33' style='display: none; '>Tab 3 is always last!</div> "+
        "</div> "+
        "</div>";

    $('#search_locations_result').html(txt);
    }
    }
});

我想你必须先了解jQuery selectors是如何工作的。

PS：服务器的响应将是JSON，正如我在dataType中指定的那样。

如果您的dataType是XML，那么您必须像这样更改您的电话

dataType: "xml",

您的XMLHttpRequest.responseText应该包含您的XML，您将使用以下内容对其进行解析：

$(XMLHttpRequest.responseText).find("<your XML tag>").each(function()
  {
    // $(this).attr("<your XML attribute>");
  });

您可以找到详细解释here和here。

希望它有所帮助。

Answer 2

让我试着为您简化一下（使用jQuery's ajax()），希望它能解决您的问题并帮助您继续前进......

var search_text = $('#txtSearch').val();

$.ajax({
   type: "GET",
   url: "ajax_search_locations.php",
   data: ({search_text : search_text, page : page}),
   dataType: 'json',
   success: function(response){
      // Do stuff with response here..  
      var markup = '<div>' + response + '</div>';
      $('#search_locations_result').html(markup);
   }, 
   error: function(response) { 
      alert("error: " + response); 
   }
 });

但我真的没有得到你的div问题 - 你能改写并解释得更好吗？

当我使用jQuery与ajax（XMLhttpREquest）时，jQuery不起作用，为什么？

2 个答案: