Question

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

我正在尝试使用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？

Answer 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>

Answer 2

您需要向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();
}

Answer 3

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

你应该注意一个关于参数的东西与方法参数名中的用法相同。

$(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!");
                      }
                  })
             });

Answer 4

在您的表单上添加一个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=""上的路径并使用该路径传递数据。

Answer 5

与其他人一样，您需要在data来电中添加$.ajax()参数。

您的另一个问题 - 阅读评论 - 是关于如何让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!";
  }
?>

Answer 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响应，请添加以下内容＆＃34; div＆＃34;在＆＃34;身体＆＃34;标签： -

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

3-创建一个PHP页面＆＃34; process_page.php＆＃34;接收提交的数据，然后发送结果

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

祝你好运

Ajax Post请求不起作用？

6 个答案: