Javascript 是否使用Jquery将HTML表单post数据发送到文件？_Javascript_Jquery_Http Post_Forms

Javascript 是否使用Jquery将HTML表单post数据发送到文件？

javascript jquery forms

Javascript 是否使用Jquery将HTML表单post数据发送到文件？,javascript,jquery,http-post,forms,Javascript,Jquery,Http Post,Forms,我正在尝试使用jQuery将post数据发送到名为postinfo.php的post数据文件处理程序，但到目前为止我可以做到以下是我的post.php代码： <HTML> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <script type="text/javscript"&g

我正在尝试使用jQuery将post数据发送到名为

postinfo.php

的post数据文件处理程序，但到目前为止我可以做到

以下是我的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>


$（'form#u id'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“http://www.vemvo.com/test/postinfo.php",
数据：$（this）.serialize（），
成功：函数（）{
警惕（“成功”）；
}
});
});

您可以在此处看到该页面：

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

<?PHP

$ime = $_POST['ime'];

echo "Your name is $ime";
?>

此处位于postinfo.php-

那么，我的错误在哪里？我如何才能让它发挥作用？现在它没有发送数据，也没有给我成功警报

您必须正确拼写

text/javascript

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

应该没有任何必要返回其他人在这里发布的false

千万不要在表格中要求提交任何东西

将html包装在body标记中

使用正确的DOCTYPE

对于文件，您可以查看uploadify或

修正了第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>


测试Ajax
$（函数（）{
$（'form#u id'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“./postinfo.php”，
数据：$（this）.serialize（），
成功：函数（）{
警惕（“成功”）；
}
});
});
});

您的jQuery选择器无法找到该表单，因为选择器在DOM中存在

form

标记之前运行。尝试将其包装到jQuery函数中，以等待文档准备就绪：

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

最好在结尾处

返回false

，以进一步抑制表单的默认post操作：

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

目前该表单正在正常发布。由于AJAX处理程序从未被附加（因为选择器执行时元素不存在），所以它只是执行一个普通的文档级表单post。由于在

表单

标记中没有指定

操作

属性，因此默认情况下，页面会自动发布。它只响应当前页面

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

<script type="text/javscript">

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

<script type="text/javascript">

Wrap$（'#form_id'）。在（'submit'，function（e）{}）in$（function（）{…}）上，我尝试了您的代码，但它没有发出成功警报。我认为它没有发送数据..请不要调用任何名称=提交！你什么意思？我已经更改了我的代码，使其看起来与您给我的代码完全相同，但它没有发出成功警报。在这里你可以看到它-非常奇怪。我确信是name=“submit”阻止了事件处理程序。主要原因是“我将在text/javascript中看起来更接近于ypo”！所以我必须做些什么更改才能将数据发布到./postinfo.php？我的整个代码会是什么样子？不需要返回false！@tonlystruck:正如我所建议的，您需要将jQuery代码包装在

$（function（）{…}）中

。当前，您的代码在

表单

元素存在之前执行。（请注意，JavaScript块位于

表单

元素上方。它立即内联执行，因此在

表单

元素已知之前执行。）在jQuery函数中包装它将导致它在整个文档准备就绪之前无法执行。@TonnyStruck:我刚刚注意到您在这里也有一个输入错误：

。我已经相应地更新了我的答案。谢谢，现在它工作得很好！请参见此处的代码（以源代码的形式查看）-您确定我需要

返回false；

以及我的整个脚本是什么样子的吗？再次衷心感谢！