Question

我使用提交按钮在ajax中发送数据而没有任何页面刷新。但页面刷新了。

请检查我的代码并告诉我这个问题。

<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";

Answer 1

//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;
});

Answer 2

js已经阻止表单提交

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

return false;

表示：问题中的JavaScript代码根本没有运行。

表格还不存在

这里的问题是当这行代码运行时：

$("#idForm")...

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

要解决问题中的问题 - 请执行以下操作之一

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

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

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

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

如果js处于就绪处理程序中：

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

脚本标记的位置并不重要，因为dom在运行时已经完成加载。

将所有j放在页面末尾

如果系统地将javascript放在页面的末尾：

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

那将关注established best practices，避免出现这样的问题，不需要在任何js代码中使用现成的处理程序（因为当脚本被解析时，html源总是已经在dom中）并且页面被认为加载速度更快。

Answer 3

使用 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;
});

Answer 4

我认为您可以使用＆＃39; preventDefault＆＃39;功能：

<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>

Answer 5

我有表格，表格中有表格，我通过服务器上的 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;
    });

Answer 6

jQuery ajax 和 XHR 很老派，jQuery 不能在不设置 contentType 和 processData 为 false 的情况下处理未知对象

使用 fetch api 会更容易

还让 html 标记像往常一样定义方法和操作。不要让 javascript 定义行为。然后你的函数可以用在更多的地方来ajaxify任何形式并且更通用。另外，您的网站可以在没有 JS 的情况下工作，以防它被关闭。 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>

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

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

6 个答案:

js已经阻止表单提交

表格还不存在

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

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

将所有j放在页面末尾