将selectbox值发送到php变量而不重新加载页面

Question

我正在通过阅读一些在线教程来学习AJAX，所以请理解我对AJAX和编程很新。我已设法使用3个选择框执行以下操作：

• 根据selectbox 1
中的选择填充selectbox 2
• 根据selectbox 2
中的选择填充selectbox 3

一切正常完美

这是我的代码：

$(document).ready(function()
{
 $(".sport").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_sport.php",
   dataType : 'html',
   data: dataString,
   cache: false,
   success: function(html)
   {
      $(".tournament").html(html);
   } 
   });
  });


 $(".tournament").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_round.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
    $(".round").html(html);
   } 
   });
  });

});
</script>

以下是一个示例

我想做什么

• 我想将3个选择框的值发送到3个php变量而不重新加载表单。

我的问题

当用户点击提交时：

1. 表单重新加载（我不想要）
2. selectbox值不会发送到我的php变量

点击提交后获取值的代码如下：

if(isset($_POST['submit'])){
$a = $_POST['sport'];
$b = $_POST['tournament'];
:
}

但是我的代码有缺陷，如上所述。

如果任何人可以帮助我 解释如何将表单数据发送到3个php变量而不重新加载表单 ，将非常感谢

Answer 1

如果您在单击按钮时不想提交表单，则需要将该输入设置为button而不是submit。您还可以将submit事件处理程序附加到表单并阻止它提交：

$("form").on("submit", function(e){
  e.preventDefault(); //This is one option
  return false; //This is another option (and return true if you want to submit it).
});

所以，说到这一点，你可能会做类似的事情：

$("form").on("submit", function(e) {
  var formData = $(this).serialize();
  e.preventDefault();
  $.ajax({
    url: 'yoururl',
    data: formData,
    type: 'post', //Based on what you have in your backend side
    success: function(data) {
      //Whatever you want to do once the server returns a success response
    }

  });
});

在你的后端：

if (isset($_POST["sport"])) {
  //Do something with sport
}
if (isset($_POST["tournament"])) {
  //Do something with torunament
}

echo "Successfull response!"; //You have to "write" something in your response and that is what the frontend is going to receive.

希望这有帮助！

Answer 2

尝试使用javascript函数preventDefault()。

请参阅this SO question。

Answer 3

使用<button>Submit</button>元素代替<input type="submit"/>，因为提交会自动提交表单。

编辑：您必须使用。（＆＃39;点击＆＃39;）而不是在jQuery中查找提交事件。