Question

这个问题已经解决了 - 解决方案就在问题的最后面。

我们说我有这种形式：

<form id="form1" action="" method="POST">
<select name="cars">
<option value="">Choose a car</option>
<option value="Ferrari">Ferrari</option>
<option value="Lamborghini">Lamborghini</option>
</select>
<select name="colors">
<option value="">Choose a color</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>

腓：

$cars = $_POST['cars'];
$colors = $_POST['colors'];
echo "Car: ".$cars." - Color: ".$colors."";

的Ajax ：

<script type='text/javascript'>
$('select[name="colors"]').on('change', function(){
$.ajax({
type: "POST",
url: "phpfile.php",
data: $("#form1").serialize(),
success: function(data){
$('#target1').html(data);
}
});
return false;
})
</script>

我想在html上显示结果：

<div id="target1"></div>

我想在选择颜色时显示结果（第二个下拉菜单）：

onchange="this.form.submit()"

已完成：）

我使用了这段代码，我得到了我想要的东西：

<script type='text/javascript'>
$("#colorID").on("change", function() {
var $form = $("#form1");
var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "GET";
$.ajax({
url: 'phpfile.php',
data: $form.serialize(),
type: method,
success: function(data){
$('#target1').html(data);
}
});
});
</script>

Answer 1

从技术上讲，你不需要ajax来获得你所要求的东西，但是继承人jQuery ajax的例子：

将您的HTML更改为：

<select name="colors" onchange="this.form.submit()">
    <option value="">Choose a color</option>
    <option value="Green">Green</option>
    <option value="Red">Red</option>
</select>

$( "#form1" ).submit(function( event ) {

 event.preventDeafault();

 alert('form submitted');

     $.ajax({
        type: "POST",
        url: "<YOUR PHP FILE PATH>",
        data: $("#form1").serialize(),
        success: function(data){
            alert('ajax success');
            $('#target1').html(data);
        }else{
            alert('ajax error');
        }

    });

  return false;

})

在你的PHP中：

print_r($_POST);
$car = $_POST['car'];
$color = $_POST['color'];
echo "<p>Car: ".$car." - Color: ".$color."</p>";

这是未经测试的 - 我在午休期间只是在手机上输入了它！

调试php添加此行（以确保帖子工作）：

print_r($_POST);

使用浏览器开发人员工具调试AJAX和JS

我添加了警报以帮助您调试 - 您可以在其工作时删除它们

使用表单Ajax（OnChange）在html上显示结果

1 个答案: