AJAX 数据和文本框数据不存储在一起

Question

我正在使用 Ajax 将有关屏幕宽度的信息发送到 PHP 页面，我还希望用户在文本框中键入一个值，但是目前这不起作用，因为只传递了文本框值，我被告知另一个值是一个未定义的索引。 任何帮助，将不胜感激。

HTML/JS 页面

<form method="post" action = "insert.php">
  <input type = "text" name ="carName" id ="carName"/>
    <div id ="screenWidth" name = "screenWidth" method="post"></div>
  <input type="submit" id= "submit" name="submit" value="submit"/>

<script type="text/javascript">
var screenWidth = screen.width + "px"; 

document.getElementById("screenWidth").innerHTML = screenWidth; 
console.log(screenWidth) 

var TestVal = ("test");
   $.ajax({
        type: 'POST',
        url: 'insert.php',
        data: {'screenWidth': screenWidth},
        success: function(data){
          console.log(data);
      }
      });

PHP页面

<?php
include 'db.php';

    $screenWidth = $_POST['screenWidth'];
    $screenHeight = $_POST['screenHeight'];

    if(isset($_POST['submit']))
{ 
    $screenWidth = $_POST['screenWidth'];
    $phoneType = $_POST['carName'];


    echo 'hello';


   $sql = "INSERT INTO deviceInfo (screenWidth, carType, )
     VALUES ('$screenWidth','$carType',)";

     if (sqlsrv_query($conn, $sql)) {
        echo "New record has been added successfully !";
     } else {
        echo "Error: " . $sql . ":-" . sqlsrv_errors($conn);
     }
     sqlsrv_close($conn);
}


?>

Answer 1

您的设置有几个问题。

1) 只有表单输入与表单一起提交。 当您单击提交按钮时，表单将通过浏览器 HTML 帖子提交，并且您的 JS 将不会运行。 表单提交只会提交帖子数据中的 carName 变量，因为 screenWidth 不在表单输入中。

2）您编写的 JS 只会通过 ajax 提交 screenWidth - 并且会在页面加载后立即运行（假设这只是一个提取物并且该 JS 在 jQuery(document).ready(function( $){ }) 块。

3）您的 carName 在您的代码中变为 carType 然后变为 phoneName，因此在您插入 SQL 时不会设置 $carType。

您在这里有 2 个选项.. 1) 将包含 screenWidth 的 div 更改为只读的文本输入。 通过这种方式，您可以在页面加载时填充 screenWidth，然后让用户在完成 carName 更新后通过 HTML 帖子提交表单。 这不会使用 AJAX，或者

2）摆脱表单并创建一个“点击”功能来提交包含两个变量的AJAX......像这样（未经测试）。

jQuery(document).ready(function($){
  $("#submit").click(function(){
     e.preventDefault();  // stop the button from posting
     $.ajax({
       type: 'POST',
       url: 'insert.php',
       data: {'screenWidth': $("#screenWidth").text(),
              'carName': $("#carName").val()},
       success: function(data){
         console.log(data);
       }
     });
  });
});