javascript - 使用 Jquery 将 HTML 表单发布数据发送到文件?

标签 javascript jquery http-post forms

我正在尝试使用 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

那么我的错误在哪里以及如何让它发挥作用? 现在它不发送数据,也不给我成功警报。

最佳答案

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

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

最后返回 false 也可能是一个好主意,以进一步抑制表单的默认发布操作:

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

目前表单正在正常发布。由于 AJAX 处理程序从未附加(因为选择器执行时该元素不存在),因此它只是执行正常的文档级表单发布。由于 form 标记中没有指定 action 属性,因此页面默认情况下会向自身发布。它仅响应当前页面。

编辑:您还有一个拼写错误,可能会阻止浏览器执行您的 JavaScript 代码:

<script type="text/javscript">

你漏掉了第二个“a”。这应该是:

<script type="text/javascript">

关于javascript - 使用 Jquery 将 HTML 表单发布数据发送到文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19476992/

相关文章:

jquery - Chrome 和 Safari jQuery .click 和 .css anchor 颜色错误?

ios - ios 的 Pwinty api

javascript - 如何在 Node.js 中从不同的应用程序注入(inject)模块

javascript - 如何修复 Chrome 开发者窗口中的 “pending” 状态?

javascript - 获取 [object HTMLDivElement] 的值

java - Android HttpPost文件上传500内部服务器错误

asp.net-mvc-3 - 发回 View 后值不会改变?

javascript - jQuery 对话框 UI 无限滚动到顶部

javascript - 如果页面上不存在 div,JQuery ui 选项卡会删除/隐藏 <ul> 中的 <li>

javascript - 向多级 Accordion 添加事件类