从我通过 ajax 发出 post 请求的文件中获取 DOM

Question

我用这个简化的例子来更好地解释这个问题。

给出ajax下的以下post请求：

$(document).ready(function()
{
   $(#submit).click(function()
   {
    $var = $("#result");
    $code = $("#code"); 
    $.post("ajax.php", {option : $var, code: $code}, function()
   {
     //Getting through the DOM could be useful if you want to analyse the answer coming from the ajax.php file
      var $DOMresponse = getElementByTagName("div")[0].firstChild.data; // I would want the correct code here because this is incorrect... this is ti give you an idea
      if($DOMresponse == "your code is correct")
      {
        $("#container1").fadeOut(400, function(){ $("#container1").html(result); });
        $("#container1").fadeIn();
      }
      elseif($DOMresponse == "your code is incorrect. Go again trough the procedure")
      {
        $("#container2").fadeOut(400, function(){ $("#container2").html(result); });
        $("#container2").fadeIn();
      }
       // In this second case I could fill the second container id="container2"
    });
  });
});

ajax.php示例：

<?php
 if($_POST['request']==1)
 { 
     if($_POST['code']==$user['code'])
     {
       ?><img src="...">
         <div>tomatoes</div>
         <div>potatoes</div>
         <div id="answer">your code is correct</div> <?php 
     } 
     else
     {
       ?><img src="...">
         <div>apples</div>
         <div>oranges</div>
         <div>your code is incorrect. Go again trough the procedure</div> <?php
      }
 }

我想知道如何获取ajax.php文件的DOM。

我该怎么做？谢谢

Answer 1

在将结果插入页面之前是否需要执行此操作？如果是这样，创建新元素并将结果插入其中。例如

var div = document.createElement('div');
var obj = $(div).html(response);

现在您有一个带有 dom 元素的标准 jQuery 对象。

回复评论：

我很困惑。您想验证 php 或 js 中的代码吗？看起来您正在检查通过 post 发送的内容是否与 $user 变量中定义的相同。所以验证代码是在 php 中完成的。在这种情况下，使用 json 作为响应不会更简单。在 php 脚本中创建结果数组，并将键状态设置为 1 或 0。在 post resposne 中，您可以检查 response.status == 0。

否则，您在 php 中进行一次验证，在响应后在 js 中进行两次验证，这看起来很奇怪。此外，如果您将响应设置为标准文本，那么您必须创建 dom 元素并将响应放入其中才能进行搜索。

Answer 2

我认为您要问的是如何获取 ajax.php 文件中 $('#code') 的值。

这就是您正在做的事情：

  var $code = $('#code'); // jQuery object
  $.post('ajax.php', { code: $code });

这样做的问题是您将整个 jQuery 对象传递给 ajax.php。您可能想要做的是传递 $('#code') 对象的值或 html，如下所示：

  var code = $('#code').html(); // if it's a non-input element
  var code = $('#code').val(); // if it's an input
  $.post('ajax.php', { code: code });

然后在 ajax.php 文件中，您的 $_POST['code'] 将等于 code 的值（例如"ABC123")，然后您可以使用它与 $user['code'] 或您想要的任何内容进行比较。

我希望我正确理解这个问题。祝你好运。

编辑：我想我明白你现在的意思了。你想要做的是这样的：

HTML：

Javascript：

    var $option = 'request';
    var $code = $('#code').val();
    $.post('ajax.php', { option: $option, code: $code }, function(data) {
        if (data == 'valid') {
             // show valid code result here
        } else {
             // show invalid code result here
        }
    });

和 ajax.php

    <? if ($_POST['option'] == 'request') {
          if ($_POST['code'] == '123ABC') {
              echo 'valid';
          } else {
              echo 'invalid';
          }
       }
    ?>

请注意，变量 data 来自 $.post 参数中的函数（数据）部分。该 data 变量包含来自 ajax.php 的响应（在我的示例中，它将是“有效”。）