Question

我有一个表格会将一些数据发送到php文件，然后返回一些结果作为示例：

<form action"<?php $_SERVER['PHP_SELF']?>" method="post" id="data">
  <input type"text" name="first_name"/>
  <input type="text" name="last_name"/>
</form>

然后在javascript中我想以提交形式抓住clcik事件作为示例：

$("#data").submit(function(){
some code .....
});

这将阻止提交输入表格到php文件的默认操作，问题是我可以发送一个表格的数据为php文件，同时捕获同一表格的事件？

注意另一个php需要从php文件返回的数据功能

Answer 1

要防止表单提交的默认行为（即页面重新加载），您需要使用event.preventDefault()这样的

$("#data").submit(function(event){
    event.preventDefault();
    //some code .....
});

要将表单数据发布到php而不刷新页面，您需要使用任何jQuery可用的ajax方法，例如.post()（这将使用{{1}发送表单值}方法）喜欢

HTTP POST

如果您的php脚本以$("#data").submit(function(event){ event.preventDefault();// prevent page reload // Now post the form using Ajax // $(this).serialize() will return an array of all form fields as // name value pair $.post('some_script.php',$(this).serialize(),function(data){ // Just to check if everything is working well console.log('Form Submitted Successfully.'); // do whatever you want with the data }); });格式返回数据，您可以使用php设置json标头，或强制jQuery通过指定{{content-Type将返回数据视为JSON 1}}在第4个参数中为dataType，如

JSON

Answer 2

$("#data").submit(function(e){
e.preventDefault();
$.post("<?php echo $_SERVER['PHP_SELF'] ?>",$(this).serialize(),function(r){ //Do Some Action });
});

添加两个事件

2 个答案: