防止在更改 select 菜单后重新加载页面
Prevent page from reloading after onchange a select menu
如果这是一个非常简单的问题,我深表歉意,但是我找不到任何答案或者不知道我做错了什么here.Also我是ajax
的新手并且jquery
。感谢您提前提供帮助!
我有一个 select 菜单,我想在更改时提交到页面 我有以下内容:
<from action="" method="post">
<select name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select></form>
和
<script type="text/javascript" >
$('#option').change, (function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "",
data: $("form.option").serialize(),
success: function() {
}
});
return false;
});
</script>
并检查是否已提交
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
}
?>
表单提交正常,但是页面在更改时仍在重新加载,有没有办法停止页面的重新加载?
任何帮助将不胜感激!
试试这个
<select id="option" name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select>
你的jquery应该是
<script type="text/javascript" >
$('#option').change(function()
{
var option_val = $(this).val();
$.ajax({
type: 'post',
url: "",
data: "option="+option_val,
success: function(res)
{
alert(res)
}
});
});
</script>
简单示例:
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
die;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>temporary test</title>
</head>
<body>
<select id="option">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('#option').change(function(){
var option_val = $(this).val();
$.ajax({
type: 'post',
url: "",
data: "option="+option_val,
success: function(res)
{
alert(res)
}
});
});
</script>
</html>
试试这个代码
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
exit;
}
?>
<form action="" method="post">
<select name="option" id="option">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</form>
<div id="msg">
</div>
<script type="text/javascript" src="../library/jquery-3.2.1.min.js"></script>
<script type="text/javascript" >
$('#option').change(function(e)
{
e.preventDefault();
var data="";
data=$("#option").val();
$.ajax({
type: 'post',
url: "",
data: {option:data},
success: function(result) {
$('#msg').html(result);
}
});
return false;
});
</script>
您的输出将在 div
标签中,option
提交 form
你也可以显示在alert
alert(result);
或在开发者工具中使用控制台
console.log(result);
如果这是一个非常简单的问题,我深表歉意,但是我找不到任何答案或者不知道我做错了什么here.Also我是ajax
的新手并且jquery
。感谢您提前提供帮助!
我有一个 select 菜单,我想在更改时提交到页面 我有以下内容:
<from action="" method="post">
<select name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select></form>
和
<script type="text/javascript" >
$('#option').change, (function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "",
data: $("form.option").serialize(),
success: function() {
}
});
return false;
});
</script>
并检查是否已提交
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
}
?>
表单提交正常,但是页面在更改时仍在重新加载,有没有办法停止页面的重新加载? 任何帮助将不胜感激!
试试这个
<select id="option" name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select>
你的jquery应该是
<script type="text/javascript" >
$('#option').change(function()
{
var option_val = $(this).val();
$.ajax({
type: 'post',
url: "",
data: "option="+option_val,
success: function(res)
{
alert(res)
}
});
});
</script>
简单示例:
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
die;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>temporary test</title>
</head>
<body>
<select id="option">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('#option').change(function(){
var option_val = $(this).val();
$.ajax({
type: 'post',
url: "",
data: "option="+option_val,
success: function(res)
{
alert(res)
}
});
});
</script>
</html>
试试这个代码
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
exit;
}
?>
<form action="" method="post">
<select name="option" id="option">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</form>
<div id="msg">
</div>
<script type="text/javascript" src="../library/jquery-3.2.1.min.js"></script>
<script type="text/javascript" >
$('#option').change(function(e)
{
e.preventDefault();
var data="";
data=$("#option").val();
$.ajax({
type: 'post',
url: "",
data: {option:data},
success: function(result) {
$('#msg').html(result);
}
});
return false;
});
</script>
您的输出将在 div
标签中,option
提交 form
你也可以显示在alert
alert(result);
或在开发者工具中使用控制台
console.log(result);