Я пытаюсь вызвать php-файл, используя функцию $ .ajax () в jQuery, однако он не работает. Следующий код запускается при нажатии кнопки на странице:
if($error === false) { alert($error); $.ajax({ url: '/new-user.php', type: 'POST', data: { name: $('#name').val(), email: $('#name').val(), password: $('#name').val() } }); Это моя форма:
<form onClick="return false;" class="reg-form"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name">First Name</label> <input type="text" id="name" class="form-control" autofocus="autofocus"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="email">Email Address</label> <input type="text" id="email" class="form-control"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="password-confirm">Confirm Password</label> <input type="password" id="password-confirm" class="form-control"> </div> </div> </div> <button class="btn trans reg-btn">Sign Up</button> <div class="reg-msg"> <span id="password-error-msg">Passwords do not match.</span> </div> </form>
Я установил форму onClick для возврата false, чтобы форма не перезагружала страницу при отправке, чтобы запустить jQuery.
Любая помощь приветствуется.
Основная причина, по которой люди используют формы, состоит в том, чтобы вы могли определить
действие (в вашем случае скрипт php),
метод (GET или POST) и
submit , которая фиксирует всю информацию в форме и автоматически отправляет ее на сервер.
Это хорошо, когда у вас есть 20-30 входов или вы работаете с несколькими файлами. В вашем случае вы обрабатываете поиск данных в своей функции ajax, у вас нет кнопки отправки, действия или метода, поэтому вы можете сделать многое намного проще, не используя форму вообще …
$.ajax({ url: '/new-user.php', type: 'POST', dataType: "json", data: { name: $('#name').val(), email: $('#email').val(), password: $('#password').val() } }).done(function(data){ alert(JSON.stringify(data)); });
Я просто забыл о форматировании divs …
<input type="text" id="name" class="form-control" autofocus="autofocus"> <input type="text" id="email" class="form-control"> <input type="password" id="password" class="form-control">
Вышеприведенный код будет захватывать данные на ваших входах, отправлять их на php-скрипт и выводить данные, которые отправляются обратно из вашего php-скрипта в предупреждении.
И самое главное, ваша страница НЕ обновится!
Я фактически сериализую свои данные формы, потому что это меньше кода. Кроме того, вы можете использовать его с несколькими формами. Например, у вас может быть скрытый ввод, который содержит номер задачи и имеет один скрипт php для делегирования заданий. Или у вас может быть другая переменная для функции отправки, чтобы передать местоположение вашего скрипта. Поэтому я представляю свои формы следующим образом.
HTML:
<form onsubmit="submitForm('#myForm'); return false;" id='myForm'> <input type='text' name='name'/> <input type='text' name='email'/> <input type='text' name='password'/> <input type='submit'/> </form>
Javascript:
function submitForm(formId){ var formData = $.(formId).serialize(); $.ajax({ url: '/script.php', type: 'POST', data: formData, success:function(response){ alert(response); } }); }
Пожалуйста, попробуйте следующий код:
$(".reg-btn").click(function(e) { e.preventDefault(); $.ajax({ url: '/new-user.php', type: 'POST', data: { name: $('#name').val(), email: $('#name').val(), password: $('#name').val() }, success:function(response){ //Do something here... } }); });
Обратите внимание, что у вас нет кнопки отправки в вашей форме. Поэтому return false бесполезно.