logo标签列表

如何在不刷新页面的情况下发送表单数据？

javascriptjqueryajax
6
我想通过提交按钮发送我的数据，而不需要刷新页面。但是页面被刷新了。
请检查我的代码并告诉我问题所在。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("#idForm").submit(function() { alert("hi");

    var url = "ajax.php";
    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data) {
               alert(data);
           }
         });

    return false;
});
</script>
<form id="idForm" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

ajax.php

echo "Hello";
6个回答
3
//Program a custom submit function for the form
$("form#data").submit(function(event){

  //disable the default form submission
  event.preventDefault();

  //grab all form data  
  var formData = new FormData($(this)[0]);

  $.ajax({
    url: 'formprocessing.php',
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function (returndata) {
      alert(returndata);
    }
  });

  return false;
});
你的脚本不起作用。点击提交按钮后页面已经刷新。 - Developer
3

JavaScript已经阻止了表单的提交

问题中的代码已经通过以下行阻止了表单的提交：

return false;

这意味着：问题中的JavaScript代码根本没有运行。
表单尚不存在
问题在于当运行此代码行时：
$("#idForm")...

该元素尚未出现在dom中。因此，提交处理程序未附加到任何内容-当表单提交时，它只是一个标准的HTTP post请求。

要解决问题，请执行以下操作之一：

确保在尝试操作元素之前该元素存在

如果脚本在元素出现在源代码后运行-则表单存在：

<form id="idForm">...
<script>
    $("#idForm")...
</script>

将jQuery代码放入文档就绪处理程序中

如果JavaScript代码在就绪处理程序中：

<script>
    $(function() {
        $("#idForm")...
    });
</script>
<form id="idForm">...

当脚本标签运行时，DOM已经完成加载，因此脚本标签的位置并不重要。

将所有JS放在页面末尾

如果将JavaScript系统地放置在页面末尾：

<body>
    <form id="idForm">...
    ...
    <script src="//ajax.googleapis.c...
    <script>
        $("#idForm")...
    </script>
</body>

那就遵循已经确立的最佳实践，避免这样的问题，在任何js代码中都不需要使用ready-handlers（因为在解析脚本时，html源码已经存在于dom中），并且让页面被感知为加载更快。
1
使用event.preventdefault()。
$("#idForm").submit(function(e) { 
e.preventDefault();//use it here to stop default behaviour
   alert("hi"); 
   var url = "ajax.php";
    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data) {
               alert(data);
           }
         });

    return false;
});
1
我认为你可以使用“preventDefault”函数来实现此功能：
<script>
$("#idForm").submit(function(e) { alert("hi");
    e.preventDefault();
    var url = "ajax.php";
    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data) {
               alert(data);
           }
         });

    return false;
});
</script>
页面即将刷新。 - Developer
1
@开发者：我找到了解决方案，就是把代码放在$(document).ready(function() {});函数中。 - Rahul Pawar
0

我有一个表单，在表单中我有一个表格，并使用formData将其发送到服务器

$("#submit").on("click", function() {
        console.log("this is form table data and sending by formData on server ")
        var emptab = document.getElementById("tab_body")
        var tabrows = emptab.getElementsByTagName("tr")
        var tabinfo = {};
        var formdata = new FormData()
        for (let tr = 0; tr < tabrows.length; tr++) {
            var tabdata = tabrows[tr].getElementsByTagName("td")
            tabinfo[tabdata[0].textContent] = tabdata[1].textContent
            formdata.append(tabdata[0].textContent, tabdata[1].textContent)
        }
        console.log("tabinfo", tabinfo)
        $.ajax({
            url: "{{ url_for('genrate_idcard')}}",
            method: "post",
            data: formdata,
            datatype: "json",
            processData: false,
            ContentType: 'multipart/form-data',
            cache: false,
            error: function(e) {
                alert("error:", e)
            }

        });

        // return false;
    });

0

jQuery ajax和XHR已经有些老旧了，如果不将contentType和processData设置为false，jQuery无法处理未知对象

使用fetch api会更容易一些

同时让HTML标记定义方法和操作，就像它一直做的那样。不要让JavaScript定义行为。这样你的函数可以在更多地方使用，将任何表单ajax化并变得更加通用。此外，如果关闭JavaScript，您的网站也可以正常工作。JavaScript应该是一种增强功能

$('#idForm').on('submit', async function (event) {

  // disable the default form submission
  event.preventDefault()

  // grab all form data
  var formData = new FormData(this)
  
  var res = await fetch(this.action, {
    method: this.method,
    body: formData
  })
  
  var json = await res.json()
});
<form id="idForm" action="{{ url_for('genrate_idcard')}}" method="post" enctype="multipart/form-data">
  <input type="text" name="first" value="Bob" />
  <input type="text" name="middle" value="James" />
  <input type="text" name="last" value="Smith" />
  <input name="image" type="file" />
  <input type="submit" name="submit" value="Submit" />
</form>

最好监听提交事件而不是使用 btn.click 事件，因为这样表单可以在提交之前验证所有字段。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接