0

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

这是我的 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

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

4

2 回答 2

2

您的 jQuery 选择器不会找到该表单，因为选择器在form标记存在于 DOM 之前运行。尝试将其包装在 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">
于 2013-10-20T11:57:40.607 回答
0

  1. text/javascript你必须正确拼写

  2. 您需要在加载时分配事件处理程序

  3. 正如其他人在这里发布的那样，不应该有任何需要返回false

  4. 永远不要在表单中调用任何东西提交

  5. 将你的 html 包裹在 body 标签中

  6. 使用正确的 DOCTYPE

  7. 对于文件，您可以查看 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>
于 2013-10-20T11:55:49.577 回答