Ajax Post 请求不起作用？答案

【问题标题】：Ajax Post request not working?Ajax Post 请求不起作用？
【发布时间】：2016-11-05 05:05:55
【问题描述】：

我正在尝试构建一个用户填写信息并单击提交的表单。单击后，页面将永远不会刷新。用户点击后会进行表单处理和数据处理。

我正在尝试使用 jQuery 和 Ajax 来实现这一点，到目前为止，这就是我所拥有的：

HTML

<form class="article_information_form" action="" method="POST"> 
  <label>Title </label> 
  <input type="text" name="articleTitle"> <br> 
  <label>Article URL: </label> 
  <input type="text" name="articleUrl"> <br>
  <p>Number of pages</p>
  <select name="numPages">
    <option value="" selected></option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
  </select>
  <br>
  <?php echo $message;?> //For Debugging
  <input type="submit" name="article_info_btn" value="Submit">
</form>

PHP

if (isset($_POST["articleTitle"], $_POST["articleUrl"], $_POST["numPages"])) {
    $message = "Success!"; //For debugging
}

Ajax

$(document).on('submit', '.article_information_form', function(e) {
    e.preventDefault();
  $.ajax({
    type : 'POST', 
    url  : '', 
    success :  function(data) {
        alert("Success!"); 
    } 
  }) 
})

单击submit 按钮后，将显示成功窗口弹出警报。不过，$message 变量永远不会打印出“成功！”这意味着它不处理 PHP $_POST。

如何让 Ajax 将信息发送到 PHP $_POST？

【问题讨论】：

这是一个 AJAX 查询，它们用于在成功函数中检索数据，它将创建一个新的 HTTP 查询。它不会对同一页面进行查询并影响该页面。我认为您需要阅读有关 AJAX 调用的更多信息。

标签： javascript php jquery ajax

【解决方案1】：

$( ".article_information_form" ).on( "submit", function( event ) {
  event.preventDefault();
  $.post(window.location , $( this ).serialize() , function(result){
        alert(result);
    });
});

你没有附加数据负载！！

由于您希望整个内容都在一个页面上，因此这是一种可能的方式：

完整代码便于理解：

<?php
//exececuted only if POST request as in the ajax below.
if($_SERVER[ 'REQUEST_METHOD']==='POST' ){
    //your processing here
    header( 'Content-Type: application/json');
    //lets set the receivedToServer property to what data we got
    $data = array();
    $data['receivedToServer'] = $_POST;
    //output data as json
    echo json_encode($data);
    //kill the page once the data is displayed
    die(); 
} 
?>
<!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
</head>
<body>
    <form class="article_information_form" action="" method="POST">
        <label>Title </label>
        <input type="text" name="articleTitle">
        <br>
        <label>Article URL: </label>
        <input type="text" name="articleUrl">
        <br>
        <p>Number of pages</p>
        <select name="numPages">
            <option value="" selected></option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
        </select>
        <br>
        <input type="submit" name="article_info_btn" value="Submit">
    </form>
</body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
    $('.article_information_form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '',
            data: $(this).serialize(),
            success: function(data) {
                //the processed data available as data variable. 
                //lets log the data received at server property we set before
                console.log(data.receivedToServer);
                alert(data.receivedToServer.articleTitle);
            }
        });
    })
</script>

</html>

【讨论】：

alert(result) 打印出我的文档页面中的所有内容，但未调用 PHP 脚本
实际上确实如此，因为您的 php 文件会继续打印。
$message 未设置为“成功！”并且没有回显
添加这几行代码后我看不出有什么不同
@user2896120 我的错！！忘了echo。这行得通，我测试过！！

【解决方案2】：

您没有将数据传递给您的方法，因此它不起作用。因此，首先您将检查方法中有多少参数，然后在参数中发送相同数量的字符串。

您应该注意一件事，参数与方法参数名称中使用的名称相同。

$(document).on('submit', '.article_information_form', function(e)
             {
                e.preventDefault();
                 $.ajax({

                      type : 'POST',
                      url  : '',
                      params : {articleTitle: 'Titlename', articleUrl : 'URLName',numPages : 'PagesNo'}
                      success :  function(data)
                      {
                        alert("Success!");
                      }
                  })
             });

【讨论】：

$message 由于某种原因仍未打印
哪里没有打印$message
在我的 PHP 脚本中 $message 设置为“成功！”

【解决方案3】：

在你的表单上添加一个 ID，在我们的例子中我放了一个 id="form_submit" 和 action="action.php"，你需要用你自己的路径替换它应该执行的操作。

<form id="form_submit" class="article_information_form" action="action.php" method="POST">

表格的这一行，

<input type="button" id="submit" name="article_info_btn" value="Submit">

将类型type="bumit"更改为type="button"以防止默认提交。

和jquery，

$('#submit').click(function() {
  var submit_url = $(this).parent('form').attr('action');
  $.ajax({
    type : 'POST', 
    url  : submit_url, 
    data : $('#form_submit').serialize(),
    dataType : 'json',
    success :  function(data) {
        alert("Success!"); 
    } 
  }) 
})

这一行var submit_url = $(this).parent('form').attr('action'); 获取action="" 上的路径并使用该路径来传递数据。

【讨论】：

如果操作是页面本身怎么办？
例如localhost/index，其中 index 是页面本身，将其付诸实践。如果你没有，jquery 会得到一个空路径，并且数据可能会到达某个地方。仅当不涉及 jquery 时才将操作留空

【解决方案4】：

您需要在 ajax 调用中添加数据：

$(document).on('submit', '.article_information_form', function(e) {
    e.preventDefault();
    $.ajax({

        type: 'POST',
        //url: '', by default is the current page url.
        data: $('.article_information_form').serialize(),//This line
        success: function(data) {
            $('.article_information_form type["submit"]').before("<div>"+data+"</div>")
        }
    })
})

PHP：

if (isset($_POST["articleTitle"], $_POST["articleUrl"], $_POST["numPages"])) {
    echo "Success!"; //For debugging
    exit();
}

【讨论】：

只要去掉url默认就是当前页面的url ;)
或者你也可以使用window.location。
删除 e.preventDefault();让它工作，但我不想重新加载页面。如何使用 window.location 使页面不会重新加载？
去掉url属性，保持e.preventDefault();查看更新
嗯，我做了，但还是一样

【解决方案5】：

正如其他人所说，您需要在您的 $.ajax() 调用中添加一个 data 参数。

您的另一个问题 - 阅读 cmets - 是关于如何让 PHP $message 变量显示页面加载。

不幸的是，没有页面刷新是不可能的，因为 PHP 是在服务器端呈现的。

我的建议是创建另一个 PHP 文件来处理您尝试创建的逻辑，然后使用 AJAX 将响应返回到当前页面。实现我相信你想做的事情。

所以！ 示例时间。

first.php

<!doctype html>
<html>
  <head><title>First</title></head>
  <body>
    <form id="myForm">
      <input name="email" type="email" />
      <button>Go!</button>
    </form>
    <div id="message"></div>
    <script>
      $('#myForm').on('submit', function(event){
        event.preventDefault();
        $.ajax({
          type: 'POST',
          data: $().serialize(); // send the form data to..
          url: 'second.php',     // your new PHP page
          complete: function(xhr, status){
            console.log('xhr', xhr);
            console.log('status', status);
            $('#message').text(status);
          }
        });
      });
    </script>
  <body>
</html>

second.php

<?php
  if (isset($_POST["email"]) {
    echo "Success!";
  } else {
    echo "Error!";
  }
?>

【讨论】：

你的回答很好理解，但是console.log('xhr', xhr)的作用是什么？
另外，我制作了两个文件来模仿你的例子，但似乎成功没有回显，也没有错误
console.log 的目的是让您可以轻松查看任何输出。检查浏览器的控制台以查看输出。它不起作用 - 如果出现问题，只会简化调试。在将代码部署到生产环境之前，您可以（并且应该）安全地删除它。

【解决方案6】：

1- 你的 Ajax 代码：-

<script>
    $(function() {

        $(".article_information_form").on("submit", function(event) {
            event.preventDefault();

            $.ajax({
                url: "process_page.php",
                type: "post",
                data: $(this).serialize(),

                success: function(html) {
                    $('#msg').html(html);
                }
            });
        });
    });

</script>

2- 要打印 AJAX 响应，请在“body”标签下添加以下“div”：-

##<div id='msg' ></div>

3-创建一个PHP页面“process_page.php”来接收提交的数据，然后发送结果

<?php
$numPages = $_POST['numPages'];
echo $numPages; //anything you echo here will be displayed in the <div id='msg'> at the main page
?>

祝你好运

【讨论】：