使用 ajax 将数据从 Jquery 传递到 PHP 而无需刷新

Question

我已经问过类似的问题，但我无法获得足够的信息。我尝试将代码减少到我需要的代码。

我正在尝试向 php 代码传递一个标题变量，我希望 php 代码在完成时给我一条成功消息。我想在不刷新页面的情况下执行此操作。

当我运行这段代码中没有 ajax 位时，它会让我点击按钮，它会在不刷新的情况下执行检查。但是一旦我输入 ajax 代码，它就不会执行检查并且会刷新。它也不运行对 php 代码进行任何检查。

我使用的 ajax 代码错了吗？我怎样才能让它在不刷新的情况下将数据发送到 php 文件并向我发送成功消息？

编辑：我在发送到 php 文件的数据周围添加了括号。现在 "fill out the form" 检查有效。但是当填写表格时，成功检查不会从 php 文件返回。

EDIT2：我将 .val() 插入到启动语句中并从 if 语句中删除了 .val() 。我从按钮中删除了 onclick 属性。并将JS中的数据更新为"data: {title1:title},"。到目前为止，状态保持不变。

EDIT3：我添加了 "dataType: JSON," 以及一些 error/success 代码。谢谢罗恩的帮助。现在，当我提交时，我得到一个 500 的 xhr 状态和一个空白的响应文本。我一直在寻找解决方案，但到目前为止还没有。

EDIT4：我将 title1 更改为 title's，这样就不会再有混淆了。现在它工作正常！谢谢罗恩的帮助。

<?php
//getting values from JS
$title = $_POST['title'];

if(!$title == "")
{
  $res="Data received successfully:";
  echo json_encode($res);
}
else {
  $error="Not received,some problem occurred.";
  echo json_encode($error);
}
?>

<!DOCTYPE html>
<html>
  <head>
 <meta charset = "utf-8">
 <title>Insert</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function () {
   $('#form').submit(function (e) {
    e.preventDefault();
   
    //debug
    var x =  document.getElementById("msg");
    var title = $('#title').val();
    var year = $('#year').val();
    var director = $('#director').val();
    var genre = $('#genre').val();
    var runtime = $('#runtime').val();
       
       
       if( title=="" || year=="" || director=="" || genre=="" || runtime=="" ) {
        x.style.color = "red";
        x.innerHTML = "Please fill out all of the blanks.";
       } else {
        //is the value being sent correct?
        x.style.color = "lightGreen";
        x.innerHTML = "Title is: "+title+ 
          "<br>Year is: "+year+
          "<br>Director is: "+director+
          "<br>Genre is: "+genre+
          "<br>Runtime is: "+runtime;
        
        $.ajax({  
     type: "POST",
     url: "insert_DVD.php",
     data: {
      title: title,
      year: year,
      director: director,
      genre: genre,
      runtime: runtime,
      },
     dataType: "JSON",
     error: function(xhr, ajaxOptions, thrownError, data) {
      alert(xhr.status);
      alert(thrownError);
      alert(xhr.responseText);
      console.log(data);
     },
     success: function(data) {
                    console.log(data);
                }
        });
         return false;
        }
    });
  });
 </script>
    <link rel="stylesheet" href="webpage.css">
  </head>
  <body class="subStyle">
   
 <div class="topnav">
    <a href="#">Home</a>
    <a href="#">Database</a>
    <a class="active" href="#">Insert</a>
 </div>
 
 <form id="form" method="post">
  If there is more than one director, separate with comma.
  <table border=0>
  <tr>
  <th>Movie Title</th>
  <th>Year Made</th>
  <th>Director</th>
  <th>Genre</th>
  <th>Runtime(Minutes)</th>
  </tr>
  
  <tr>
  <td><input type=text name="title"    id="title"    maxlength=100 size=30></td>
  <td><input type=text name="year"     id="year"     maxlength=4   size=10></td>
  <td><input type=text name="director" id="director" maxlength=100 size=30></td>
  <td><input type=text name="genre"    id="genre"    maxlength=20  size=20></td>
  <td><input type=text name="runtime"  id="runtime"  maxlength=4   size=20></td>
  </tr>
  
  <tr><td>
  <button type="submit" id="update" value="send">Update Database</button></td></tr>
  </table>
 </form>
 
 <p id="msg">Click the update button.</p>
   </body>
</html>

Answer 1

可能应该是一个对象

data: {title1:title1}

Answer 2

我不在我的开发计算机旁，所以我无法真正测试 php 方面的事情，但你确实有两个 javascript 错误，其中一个可能导致了问题。

不是您的问题，而是控制台出错。

1) 从 onclick 中删除 passData() 函数。它不是必需的，因为您正在使用 .submit.

观察表单提交

可能是您遇到问题的原因

2) 当您定义 "title1" 时，您没有得到它的值，这将导致当前提交表单时出现 HTMLFormElement.toString 错误。取而代之的是通过以下方式继续并在定义标题 1 时获取值：

$('#title').val();

然后从 if 语句中删除 title1.val() 以检查其是否已填充，而只是将 title1 == ""

现在您正在通过 ajax 调用发送一个 HTML 元素，这将导致 jquery 失败。换句话说，您目前正在发送：

data: {title: (HTML ELEMENT)}

让我知道这是否解决了问题。如果没有，我会在到达可以运行 PHP 的位置时将其拉起。

EDIT：此外，正如其中一条评论所指出的，您需要将 PHP 更改为成为 $_POST['title'] 以匹配您发送的内容。您可以通过回显一些错误来验证 php 方面发生的事情。我已经有很长时间没有做过 php 但我通常会做这样的事情：

error_reporting(E_ALL & ~E_DEPRECATED);
ini_set('display_errors', 1);

在我的脚本顶部进行调试以调试它们。这会将错误从 php 传递回 Ajax 响应（如果有的话）。不过那是在 PHP 5 天后。

EDIT2：我就是这样工作的

test.php

<?php
  //getting values from JS
  $title = $_POST['title'];

  if(!$title == "") {
    $res="Data received su ccessfully:";
    echo json_encode($res);
  } else {
    $error="Not received,some problem occurred.";
    echo json_encode($error);
  }
?>

index.html 只是 ajax 部分：

$(document).ready(function() {
$('#form').submit(function(e) {
    e.preventDefault();

    //debug
    var x = document.getElementById("msg");
    var title1 = $('#title').val();



    if (title1 == "") {
        x.style.color = "red";
        x.innerHTML = "Please fill out all of the blanks.";
    } else {
        $.ajax({
            type: "POST",
            url: "test.php",
            data: {
                title: title1
            },
            dataType: "JSON",
            error: function(xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
                alert(xhr.responseText);
            },
            success: function(data) {
                console.log(data);
            }
        });
        return false;

    }
});
});

很遗憾，我现在没有时间解释更改的内容，但我明天会解释！（希望 :)

此外，我没有将成功消息放在 html 中，我忘记了，而是 console.logging 您可以在浏览器控制台中看到的响应。抱歉，我希望我今晚有更多时间来回复。

使用 ajax 将数据从 Jquery 传递到 PHP 而无需刷新

Passing data to PHP from Jquery using ajax without refreshing

php

ajax

jquery

xmlhttprequest

responsetext