Ajax 不断重定向到 php 页面

Question

我有一个 shopify 商店，我想在产品页面上添加一个表单，问题是当我想使用带有外部链接的 ajax 提交一个表单时，但我想留在它转到外部链接的同一页面上

<form method="post" id="fastform"action="http://website.fun/bianca/doc.php" class="form" enctype="multipart/form-data">
<label  class="label" style="color: rgb(0, 0, 0);">Nom :  </label>
<input placeholder="Nom"    class="input" width="100%" type="text" name="nom" id="nom">
<label  class="label" style="color: rgb(0, 0, 0);">Télephone* :  </label>
<input placeholder="Telephone"    class="input" width="100%" type="text" name="phone" id="phone">
<input placeholder="Adresse"    class="input" width="100%" type="text" name="adresse" id="adresse">
<div id="form-messages"></div>
<button type="submit" class="button-input btn btn-default" name="btn"style="margin-top: 20px;" id="btn">Commander</button>

这是 js en ajax 部分

<script>

$(function () {
    // Get the form.
    var form = $('#fastform');

    // Get the messages div.
    var formMessages = $('#form-messages');

    // Set up an event listener for the contact form.
    $(form).submit(function (event) {
        // Stop the browser from submitting the form.
        event.preventDefault();
        // Serialize the form data.
        var formData = $(form).serialize();
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
            }.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // Set the message text.
            $(formMessages).text("votre commande et bien traiter");

            // Clear the form.
            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        })).fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // Set the message text.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! il\'ya un problem');
            }
        });
                });

我希望页面保持不变并在同一页面上获得结果

Answer 1

试试这个，

$( "#your_form_id" ).submit(function(event) {
    event.preventDefault();
    $.ajax({
            beforeSend: function () {
                //something to do before ajax call
            },
            complete: function () {
               //something to do after ajax call
            },
            type:"POST",
            data:$(this).serialize(),
            url:"<?php echo $url;?>",
            success:function(data){
                $('#divId').html(data); // id where you want to retrive and show your data
            }
    });

});

请再次检查您的操作网址

Answer 2

试试这个

像这样改变表格。

<form method="post" id="fastform" onsubmit='return submitForm()' action="http://website.fun/bianca/doc.php" class="form" enctype="multipart/form-data">

然后像这样改变函数，

  function submitForm(){

  var formData = $('#fastform').serialize();
  $.ajax({
      type: 'POST',
      url: $('#fastform').attr('action'),
      data: formData
  }.done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages).removeClass('error');
      $(formMessages).addClass('success');

      // Set the message text.
      $(formMessages).text("votre commande et bien traiter");

      // Clear the form.
      $('#name').val('');
      $('#email').val('');
      $('#message').val('');
  })).fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages).removeClass('success');
      $(formMessages).addClass('error');

      // Set the message text.
      if (data.responseText !== '') {
          $(formMessages).text(data.responseText);
      } else {
          $(formMessages).text('Oops! il\'ya un problem');
      }
  });

  return false;

}

Answer 3

试试这个代码：

$(function (){ 
 $('form').bind('submit', function () { 
       $.ajax({ type: 'post', 
        url: 'libs/send.php', 
        data: new FormData($('form')[0]),
        cache: false, 
        contentType: false,
        processData: false,
        success: function () { 
      alert("Data has been successfully inserted"); 
   } 
    }); 
   return false; 
 }); 
});