How to send form data without page refresh?

前端未结

关注

 4  710

清歌不尽

I have sending my data in ajax using submit button without any page refresh. But the page refreshed.

Please check my code and let me know the problem.

相关标签:

4条回答

南方客

2021-01-06 04:17
The js already prevents the form submitting

The code in the question already prevents the form from submitting by this line:
```
return false;
```
which means: The JavaScript code in the question isn't running at all.

The form doesn't exist yet

The problem here is that when this line of code runs:
```
$("#idForm")...
```
that element isn't in the dom yet. As such the submit handler isn't attached to anything - when the form submits it's just a standard HTTP post request.

To just fix the problem in the question - do one of the following

Ensure the element exists before trying to manipulate it

If the script runs after the element appears in the source code - the form does exist:
```
<form id="idForm">...
<script>
    $("#idForm")...
</script>
```
Put jquery code in a document ready handler

If the js is in a ready handler:
```
<script>
    $(function() {
        $("#idForm")...
    });
</script>
<form id="idForm">...
```
It doesn't matter where the script tag is as the dom has already finished loading when it runs.

Put all js at the end of the page

If javascript is systematically put allat the end of the page:
```
<body>
    <form id="idForm">...
    ...
    <script src="//ajax.googleapis.c...
    <script>
        $("#idForm")...
    </script>
</body>
```
That would be following established best practices, avoid such problems, don't need to use ready-handlers in any js code (as the html source is always already in the dom when scripts are parsed that way) and have pages that are perceived to load faster.
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲&欢浪女

2021-01-06 04:22

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

0 讨论(0)

名媛妹妹

2021-01-06 04:23

I think you can use the 'preventDefault' function for this:

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

0 讨论(0)

小蘑菇

2021-01-06 04:37

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

0 讨论(0)

How to send form data without page refresh?

The js already prevents the form submitting

The form doesn't exist yet

Ensure the element exists before trying to manipulate it

Put jquery code in a document ready handler

Put all js at the end of the page