Функция Ajax не работает должным образом

Я пытаюсь использовать базовую вставку базы данных с помощью ajax и вставляя часть, прекрасно работает, проблема заключается в том, что страница перенаправляется после вставки завершена. Я пришел к этой проблеме раньше и нашел решение (изменил часть src как ниже)Функция Ajax не работает должным образом

src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

Но это решение didt работает на этот раз, что я снова ошибаюсь?

это index.php

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="site.js"></script> 
</head> 
<body> 
<form action="process.php" id="myForm"method="post"> 
    <input type="text" name="uname"><br> 
    <input type="text" name="pass"><br> 
    <input type="text" name="fname"><br> 
    <input type="text" name="lname"><br> 
    <button id="submit" value="Insert"/> <br> 

</form> 
<div id="ack"></div> 
</body> 
</html>

и это мой сценарий

$("#submit").click(function() { 

    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 

      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 

}); 

$("#myForm").submit(function(event) { 
    event.preventDefault(); 
    return false; 
}); 

function clear() { 

    $("#myForm :input").each(function() { 
     $(this).val(""); 
    }); 

}

источник

2016-09-30 ali ak

К вашей кнопке можно добавить атрибут 'type =" button, чтобы он не действовал как кнопка отправки (тип по умолчанию). –

Передать вызов на самом деле не принадлежит в обработчик щелчка, переместить его и использовать event.preventDefault (), если вы хотите избежать отправки формы другими средствами, кроме созданного вами обработчика кликов.

$("#submit").click(function() { 

    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 

      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 

}); 

$("#myForm").submit(function(event) { 
    event.preventDefault(); 
    return false; 
}); 

function clear() { 

    $("#myForm :input").each(function() { 
     $(this).val(""); 
    }); 

}

источник

2016-09-30 19:56:01

, если данные из полей формы отправляются для вставки через метод $ .post, поэтому почему необходимо отправить форму через функцию отправки отдельно? –

Нет необходимости. $ ('# myForm'). submit (...) не является строго необходимым, но может служить резервом для предотвращения ситуации, когда браузер отправляет форму каким-либо другим способом, кроме пользователя, нажимающего кнопку (например, нажав enter в текстовое поле). –

да, вы правы, это может быть случай. –

Переключение в обработчик события .submit():

$("#myForm").submit(function(event) { 
    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 
      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 
    event.preventDefault(); 
});

источник

2016-09-30 20:25:31

Описание

Оберните ваш $ код .post в функции обработчика представить.
Используйте функцию event.preventDefault(), чтобы предотвратить отправку формы.
Используйте $ ('# myform') [0] .reset() для очистки полей ввода вместо использования отдельной функции очистки.

Код

$("#myForm").submit(function (event) { 
    $.post($("#myForm").attr("action"), 
      $("#myForm :input").serializeArray(), 
      function (info) { 
       $("#ack").empty(); 
       $("#ack").html(info); 
       // instead of using the clear() function 
       // separately you may clear all the empty 
       // fields like this 
       $('#myform')[0].reset(); 
      }); 
    event.preventDefault(); 
});

источник

2016-09-30 21:11:54

Не уверен, если это будет работать с JQuery 1.8.2, но вот как я достиг этого то же самое в прошлом.

$('#myForm').on('submit', function(e) { 
    e.preventDefault(); 
    var details = $('#myForm').serialize(); 
    $.post('process.php', details, function(data) { 
     $('#ack').html(data); 
     $('#myForm').trigger("reset"); 
    }); 
});

источник

2016-09-30 21:41:47

Функция Ajax не работает должным образом

ответ

Смежные вопросы