AJAX 未将用户输入从表单发送到 PHP 脚本

Question

我一直在尝试通过在线学习各种教程和示例来学习基本的 AJAX 和 Javascript，但是我碰壁了。我正在尝试编写一个简单的脚本来使用 AJAX 从表单中获取用户输入并将其提交给 PHP 脚本，然后该脚本只是回显输入。

我真正能说的是，输入的任何内容都没有通过，但我还没有到可以说出原因的地步。我尝试过使用 POST 和 GET 以及各种数据类型，结果相同。我确定我做错了什么或误解了什么，但我不确定是什么。

HTML/AJAX

<form id="my_form">
    word <input type ="text" id="word1"/><br/>
    <input type="submit">
</form>
<script>
$(document).ready(function(){
    $("#my_form").on(function(e){
        e.preventDefault();
        var verb = $("word1").val();
        $.ajax({
            url: "testrun.php",
            data: "verb",
            type: "POST",
        });        
    });
});
</script>

PHP

if (isset($_POST['verb'])){
   $x= $_POST['verb'];
   echo $x;
}else { 
   echo "not working";
}

编辑：到目前为止，我已经尝试了一些建议，直接复制和粘贴它们，但实际上它们都没有做任何我能看到的事情。我想我开始更多地了解 AJAX 应该如何工作，基于响应，但由于某种原因它仍然没有到达 PHP。我已经尝试在一个单独的文件中使用 AJAX/HTML 调用 testrun.php 脚本，并将所有内容放入 testrun.php 文件中，基本上让它使用 AJAX 调用自己，但是这两种方法都没有取得任何成果。

如果我从响应中得到的 AJAX 很好，那么我是否误解了应该如何设置 PHP 以实际接收 POST 数据？我还是很迷茫。

Answer 1

三个变化：-

1.var verb = $ ("word1").val(); 必须是var verb = $ ("#word1").val();，因为它的 id (word1)

2.data: "verb", 必须是data: {"verb":verb},

3.form提交需要正确所以下面给出的代码（缺少submit）：-

正确代码：-

$(document).ready(function(){
    $("#my_form").on('submit',function(e){ // check here you have one missing `submit`
        e.preventDefault();
        var verb = $("#word1").val(); // remove space between `$` and `(`
        $.ajax({
          url: "testrun.php",
          data: {"verb":verb},
          type: "POST",
        });
   });
});

Answer 2

您不能在 ajax 中以 data: "verb", 发送数据。你需要在参数中发送你的数据。

其次，word1输入的值无法获取为$("word1").val();，需要使用#通过ID获取输入。

示例：

$(document).ready(function(){
    $( "#my_form" ).submit(function( e ) { //CHANGED using submit event.
        e.preventDefault();
        var verb = $("#word1").val(); //CHANGED
        $.ajax({
        url: "testrun.php",
        data: "verb="+verb, //CHANGED
        type: "POST",
        });
    });
});

Answer 3

1. 您忘记了 # 的敌人 ID 选择器 word1。
2. .on() 需要绑定事件。在您提交表单的情况下，它是submit

3. 数据应该作为对象传递。在您的情况下，您将能够使用$_POST['verb'] 访问它

   $(document).ready(function ()
   {
       $("#my_form").on('submit', function (e)
       {
           e.preventDefault();
           var verb = $("#word1").val();
           $.ajax({
               url: "testrun.php",
               data: {verb: verb},
               type: "POST"
           });
       });
   });
   

Answer 4

您错过了# 登录var verb = $("word1").val();

并将变量用作data 的变量，例如data: {"your_var_name" : verb}

Answer 5

试试这个 ...

$.ajax({
  type: "POST",
  url: "testrun.php",
  data: "paramname=value",  // access in php $_POST['paramname']
  success: function(data){
    // if page request is success
  },
  error: function(data){
    // if page request failes
  }
});

Answer 6

你必须这样做：

var verb = $("#word1").val();  //Don't forget to add #
$.ajax({
    url: "testrun.php",
    data: {"verb":verb},
    type: "POST",
});

verb是变量，引号之间不用加！

正确答案是 HEREAnant