javascript - AJAX 数据和文本框数据不存储在一起
问题描述
我正在使用 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);
}
?>
解决方案
您的设置有几个问题。
1) 只有表单输入与表单一起提交。当您单击提交按钮时,表单将通过浏览器 HTML 帖子提交,您的 JS 将不会运行。表单提交只会提交 post 数据中的 carName 变量,因为 screenWidth 不在表单输入中。
( $){ }) 块。
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);
}
});
});
});
推荐阅读
- react-native - react native 升级库冲突
- wordpress - 联系表格 7 更新成功消息
- php - 为什么在 Controller 中选择 FormRequest 授权而不是 Policies/Gates?
- python - 修改列表中字典的值,更改列表中所有字典中的所有值
- c++ - Magick++ API:获取 PDF 页数?
- python - 加载 cog 时执行函数
- php - 我的存储假货没有将图像存储在测试目录中
- python - Selenium - 元素不可交互
- pandas - Pandas to_excel() UTF-8 错误(已禁用保存)
- nginx - sudo certbot delete 创建的错误