Ajax提交不起作用（无法在php中读取$ _POST）

Question

I am trying to submit my form using Ajax. 我正在尝试使用Ajax提交表单。 When the button is clicked the hit() function gets called and passes the contents of the textbox back to test.php 单击按钮时，将调用hit（）函数，并将 文本框的内容传递回test.php

$_POST seems to be empty, since I get the alert from ajax (form was submitted) but I don't get to see the echo ( echo $_POST['textbox'] ) $_POST似乎是空的，因为我收到了来自ajax的警报（已提交表单），但是却看不到echo（ echo $_POST['textbox'] ）

test.php test.php

<?php
    echo "test";
    if($_POST)
    {
        echo $_POST['textbox'];
    }
?>
<html>
    <body>
            <form action="index.php" method="post" align="center" id="form" name="form">

                <script type="text/javascript" src="test2.js"> </script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>


                <input type="text" class="form-control" id="input" name="input" oninput="check();">
                <input type="button" class="form-control" id="send" name="send" value="Send" onclick="hit();">
            </form>
    </body>
    </div>
</html>

test2.js test2.js

function hit() {
        var inputText = $("#input").val();
        var inputTextString = "textbox=" + inputText;
        $.ajax({
            type: 'post',
            url: 'test.php',
            data: inputTextString,
            success: function () {
              alert('form was submitted');
            }
        });

}

Answer 1

you will get the desired results in the response. 您将在响应中获得理想的结果。

function hit() {

        var inputText = $("#input").val();


        $.ajax({
            type: 'post',
            url: 'test.php',
            data: {textbox : inputText},
            success: function (res) {
              alert(res);
            }
        });

}

And you need to change in your test.php file. 并且您需要更改test.php文件。

<?php
    echo "test";
    if($_POST)
    {
        echo $_POST['textbox'];exit;
    }
?>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="test2.js"> </script>
</head>

    <body>
            <form action="index.php" method="post" align="center" id="form" name="form">
                <input type="text" class="form-control" id="input" name="input" oninput="check();">
                <input type="button" class="form-control" id="send" name="send" value="Send" onclick="hit();">
            </form>
    </body>
    </div>
</html>

Answer 2

There're more of problems here 这里还有更多问题

In test.php 在test.php中

how can you include your js file before you include jquery .. first is first .. After Tested Yes you can use jquery $() inside a function without getting $ undefined error while you'll run the function after include jquery .. sorry my bad 您如何在包含jquery之前包含js文件..首先是第一个.. 经过测试 是，您可以在函数内使用jquery $()而不会出现$ undefined错误，而在包含jquery之后运行该函数..对不起坏
Scripts should be on the <head></head> or before </body> 脚本应位于<head></head>或</body>之前
while you using just button click why you're using <form> 在使用“仅”按钮时，单击为什么使用<form>

your code should be something like that 您的代码应该是这样的

<?php
    echo "test";
    if($_POST)
    {
        echo $_POST['textbox'];
        return false;
    }
?>
<html>
    <head>
    </head>
    <body>
         <input type="text" class="form-control" id="input" name="input" oninput="check();">
          <input type="button" class="form-control" id="send" name="send" value="Send" onclick="hit();">

      <script type="text/javascript" src="test2.js"> </script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    </body>
    </div>
</html>

On test2.js 在test2.js上

function hit() {
    var inputText = $("#input").val();
    var inputTextString = {textbox : inputText}; // use this
    $.ajax({
        type: 'post',
        url: 'test.php',
        data: inputTextString,
        success: function () {
           alert('form was submitted');
        }
    });
}

Note: for me I prefer to use separated php file to use it with ajax .. it'll make it easier for outputs 注意：对我来说，我更喜欢使用分离的php文件与ajax一起使用..这样可以简化输出

If you need to use a form .. you can use your form code including my notes above and make your submit button type="submit" and remove onclick="hit()" from it then on your js file you can use 如果您需要使用表单..您可以使用包括上面我的注释的表单代码，并使提交按钮的类型为“ submit”，并从中删除onclick="hit()" ，然后在您的js文件中使用

$(document).ready(function(){
     $('form').on('submit',function(e){
        e.preventDefault(); // to prevent form reload
        var inputText = $("#input").val();
        var inputTextString = {textbox : inputText}; // use this
        $.ajax({
           type: 'post',
           url: 'test.php',
           data: inputTextString,
           success: function () {
              alert('form was submitted');
           }
        });
     });
});

Answer 3

you never test if you see the reponse from echo - hence you don't alert the response from php at all. 您永远不会测试是否看到echo的响应-因此根本不会警告php的响应。

To see what your php script returns you have to alert (or log, or do something usefull with) the passed in parameter to the success callback: 要查看您的php脚本返回的内容，您必须对成功回调中传入的参数进行警报（或记录或进行一些有用的操作）：

....
success: function (response) { 
     alert(response);
     console.log(response); 
},
....

Anyway you should make sure to not send additional data (like unneeded html in your case) back to ajax, but only the value/json. 无论如何，您应该确保不要将其他数据（例如您的情况下不需要的html）发送回ajax，而仅发送回value / json。 So in your case an exit; 因此，在您的情况下exit; after echo would help. echo后会有所帮助。

Also follow @Mohammed-Yousef's instructions for the other issues!! 还请按照@ Mohammed-Yousef的说明处理其他问题！！

Ajax提交不起作用（无法在php中读取$ _POST）

问题描述

3 个解决方案

解决方案1
2 2017-12-05 21:26:24

解决方案2
2 已采纳 2017-12-05 21:30:33

解决方案3
2 2017-12-05 21:33:37

Ajax提交不起作用（无法在php中读取$ _POST）

问题描述

3 个解决方案

解决方案1 2 2017-12-05 21:26:24

解决方案2 2 已采纳 2017-12-05 21:30:33

解决方案3 2 2017-12-05 21:33:37

解决方案1
2 2017-12-05 21:26:24

解决方案2
2 已采纳 2017-12-05 21:30:33

解决方案3
2 2017-12-05 21:33:37