Question

我正在尝试使用jQuery将帖子数据发送到名为postinfo.php的帖子数据文件处理程序，但到目前为止我可以做到。

这是我的post.php代码：

<HTML>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script type="text/javscript">
$('#form_id').on('submit', function(e){
    e.preventDefault();
    $.ajax({
       type: "POST",
       url: "http://www.vemvo.com/test/postinfo.php",
       data: $(this).serialize(),
       success: function() {
         alert('success');
       }
    });
});
</script>   
<form method="post" id="form_id">
<input type="text" name="ime">
<input type="submit" id="submit" name="submit" value="Send">
</form>

您可以在此处查看页面：http://www.vemvo.com/test/post.php

以下是我的postinfo.php中的代码：

<?PHP

$ime = $_POST['ime'];

echo "Your name is $ime";
?>

此处位于postinfo.php - http://www.vemvo.com/test/postinfo.php

那么我的错误在哪里以及如何使其发挥作用？现在它没有发送数据而没有给我成功警报。

Answer 1

您的jQuery选择器不会找到该表单，因为选择器在DOM中存在form标记之前运行。尝试将其包装在jQuery函数中以等待文档准备就绪：

$(function () {
    $('#form_id').on('submit', function(e){
        // the rest of your code
    });
});

最后return false也可能是一个好主意，以进一步抑制表单的默认帖子操作：

e.preventDefault();
$.ajax({
   type: "POST",
   url: "./postinfo.php",
   data: $(this).serialize(),
   success: function() {
     alert('success');
   }
});
return false;

目前表格正常发布。由于AJAX处理程序从不附加（因为当选择器执行时元素不存在），它只是做一个普通的文档级表单发布。由于action标记中没有指定form属性，因此默认情况下页面会自行发布。只响应当前页面。

编辑：您还有一个错字，可能会阻止浏览器执行您的JavaScript代码：

<script type="text/javscript">

你错过了第二个“a”。这应该是：

<script type="text/javascript">

Answer 2

你必须正确拼写text/javascript
您需要在加载时分配事件处理程序
不应该像其他人在这里发布的那样返回虚假
永远不要以表格提交任何内容
将html包装在body标签中
使用正确的DOCTYPE
对于文件，您可以查看uploadify或How can I upload files asynchronously?

第1至6点的固定代码

<!DOCTYPE html>
<html>
<head>
<title>Test Ajax</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $.ajax({
       type: "POST",
       url: "./postinfo.php",
       data: $(this).serialize(),
       success: function() {
         alert('success');
       }
    });
  });
});
</script>
</head> 
<body>
  <form method="post" id="form_id">
    <input type="text" name="ime">
    <input type="submit" value="Send">
  </form>
</body>
</html>

使用Jquery将HTML表单发布数据发送到文件？

2 个答案: