javascript - ajax成功但PHP文件无法运行

Question

在我的ajax中，我可以看到控制台消息，这意味着我的ajax已成功将数据发送到php文件，但在php文件中，它没有回显或函数运行。(两个文件位于同一文件夹中)

index.php脚本:

     function kk(){  
      $(document).ready(function(){
       var id = document.getElementById('auto').value;
       var datastring = 'id1=' + id;      
        $.ajax({
            type: "POST",
            url: "getHint2.php",
            data: datastring,
            cache: false,
            success: function(data){
              console.log(" ajax success");
            // echo what the server sent back
           }
        });
    });
   }

getHint2.php 文件:

 echo "this is from php file!";
   if(isset($_POST['id1']))
   {
       echo "hello " . $_POST['id1'];
   };

HTML:kk 是上面的 JS 函数。

 <div class="caret">
            <form>
                <input type="text" value="97121243" id="auto">
            </form>           
   </div>
        <input type="button" value="click" onclick="kk();"/>

Answer 1

尝试使用console.log(id)就在实际的 ajax 调用之前。它可能没有发送您认为它正在发送的值。

此外，由于您使用的是 jQuery，因此您可以简单地执行以下操作:

var id = $('#auto').val();

作为旁注，我强烈建议您查看 .submit回调和 .serialize使用 AJAX 设计和处理表单的功能。例如，我会这样实现:

<div class="caret">
    <form id = "myForm">
        <input type="text" name="id1" value="97121243" id="auto">
        <button type="submit">Submit</button>
    </form>           
</div>

<script>
    $(document).ready(function(){
        $("#myForm").submit(function(e){
            e.preventDefault();
            // Serialize the form data
            var serializedData = $(this).serialize();
            $.ajax({  
              type: "POST",  
              url: "getHint2.php",  
              data: serializedData,
              cache: false,
            }).done(function(data) {      
              console.log(data);
            // echo what the server sent back
           });
        });
    });

</script>

一些评论:

1. 我使用了<button>元素而不是 <input>元素。 <button>是一种更新、更灵活的按钮实现方式

2. 我将按钮设置为 type=submit并将其放入 <form> 内，所以我不需要手动将按钮的点击链接到ajax提交。它只是在提交表单时发生!

3. 通过使用.serialize() ，我不需要显式指定我想要发送的每个表单变量 - 我所需要做的就是为每个控件提供适当的 name属性!这将使您的代码在以后更容易维护。

4. 我使用.done(function(data) {而不是success 。请注意success是 deprecated as of jQuery 1.8 :

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.