如何在提交到 PHP 之前使用 AJAX 从选择标签中获取数据？
Posted
技术标签:
【中文标题】如何在提交到 PHP 之前使用 AJAX 从选择标签中获取数据？【英文标题】：How to get data from select tag using AJAX before submitting into PHP? 【发布时间】：2016-08-19 05:00:44 【问题描述】：我想获取选择标签 id="departmentselect" 的数据，以便在提交表单之前将其值存储在 mysql 数据库中。听说你会在提交表单之前使用 AJAX 来获取数据。因为当我选择学院选择标签及其对应的部门选择标签值时，它只会在数据库的部门中存储一个数字。
MYSQL 数据库示例：
在mysql的查询中，部门没有得到json文件的值。它只显示数字。
这是我的 PHPCode
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form action="SignupProcess.php" method="POST" onsubmit="return check_password();" id="signupform">
<select id="collegeselect" name="collegeselect">
<option value="">College</option>
<option value="College of CAS">College of CAS</option>
</select>
<select id="departmentselect" name="departmentselect">
<option value="">Department</option>
</select>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="GetCollegeJsonData.js"></script>
<script>
$('#signupform').submit(function(e))
if($('#departmentselect').val() != '')
$ajax
(
type: 'POST',
url: 'Signup.php?select' += select,
success: function(data)
alert(data);
);
else
alert('error');
e.preventDefault();
);
</script>
</html>
脚本类型 这是使用ajax的脚本，但它似乎没有任何效果。
<script>
$('#signupform').submit(function(e))
if($('#departmentselect').val() != '')
$ajax
(
type: 'POST',
url: 'Signup.php?select' += select,
success: function(data)
alert(data);
);
else
alert('error');
e.preventDefault();
);
</script>
JQUERY 代码 文件名 GetCollegeJsonData.js
我从文件中获取 JSON 数据并将其读入我的 Jquery 文件，然后使用脚本将文件链接到我的 php 代码
//Get json
$('body').on('change', '#collegeselect', function()
var selected_college = $(this).val();
$('#departmentselect').html('');
$.getJSON("CollegeAndDepartment.json", function(data)
$.each(data[selected_college], function(key, val)
$('#departmentselect').append("<option value='" + key + "'>" + val + "</option>");
);
);
)
它的 JSON 文件
"College of CAS": ["Biology", "English", "LIACOM", "Library & Information Science", "Mass Communication", "Philosophy", "Political Science", "Psychology"]
我的 Ajax 函数不正确吗？
【问题讨论】：
你错过了点（.）。应该是 $.ajax 而不是 $ajax。
科长还是显示数字0，我觉得我的ajax函数不对。
这里似乎有一些语法错误，这可能不是实际错误，但可能会阻止其他人正确识别您的问题。例如，时友在您的问题使用$ajax 时提到了$.ajax。我在看url: 'Signup.php?select' += select ..这里发生了什么？ select 变量是什么？
我调用 id="departmentselect" 选择标签先生，这意味着它使用选择标签中的值定位 url。我使用此链接作为参考***.com/questions/30680554/…
你实际上并没有存储变量select。您只能在 if 条件中获取比较值：if($('#departmentselect').val() != '')
【参考方案1】：
您的 ajax 方法代码有语法错误，当您使用 post 方法时，您必须使用数据选项而不是 URL 来发布数据。数据应该在 json 对象或查询字符串中。 你的 ajax 函数应该是
<script>
$('#signupform').submit(function(e))
if($('#departmentselect').val() != '')
$.ajax(
type: 'POST',
url: 'Signup.php',
data: select: $('#departmentselect').val(),
success: function(data)
alert(data);
);
else
alert('error');
e.preventDefault();
);
</script>
【讨论】：
只会显示部门sir的数值编号，不会显示json文件的数值。示例：选择 College of Cas，然后选择英语。提交表单时，值“English”不会出现在数据库中。它只会显示一个值 0 或 1。类型是 mysql 中的文本。 它有效，先生，我没有意识到我的部门选择标签的查询类型是 int 类型。【参考方案2】：我已将您的代码编辑如下。
Kindly give it a try.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form action="SignupProcess.php" method="POST" onsubmit="return check_password();" id="signupform">
<select id="collegeselect" name="collegeselect">
<option value="">College</option>
<option value="College of CAS">College of CAS</option>
</select>
<select id="departmentselect" name="departmentselect">
<option value="">Department</option>
</select>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="GetCollegeJsonData.js"></script>
<script>
$('#signupform').submit(function(e)
if($('#departmentselect').val() != '')
$.ajax
(
type: 'POST',
data:select:$('#departmentselect').val(),
url: 'Signup.php',
success: function(data)
alert(data);
);
else
alert('error');
e.preventDefault();
);
</script>
</html>
For GetCollegeJsonData.js, ihave modified as follows:
//Get json
$('#collegeselect').on('change', function()
var selected_college = $(this).val();
$('#departmentselect').html('');
$.getJSON("CollegeAndDepartment.json", function(data)
$.each(data[selected_college], function(key, val)
$('#departmentselect').append("<option value='" + val + "'>" + val + "</option>");
);
);
)
【讨论】：
以上是关于如何在提交到 PHP 之前使用 AJAX 从选择标签中获取数据？的主要内容，如果未能解决你的问题，请参考以下文章
使用 AJAX 将 result.php 提交到 bootstrap Modal