提交表单刷新页面
我有一个index.html
League of Legends Straw Poll Game Straw Poll
一个AJAX函数到js脚本中
// magic.js $(document).ready(function() { // process the form $('form').submit(function(event) { $('.form-group').removeClass('has-error'); // remove the error class $('.help-block').remove(); // remove the error text // get the form data // there are many ways to get this data using jQuery (you can use the class or id also) var formData = { 'game' : $('input[name=game]').val(), 'question' : $('input[name=question]').val(), 'option' : $('input[name=option[]]').val(), 'choice' : $('input[name=choice]').val() }; // process the form $.ajax({ type : 'POST', // define the type of HTTP verb we want to use (POST for our form) url : 'process.php', // the url where we want to POST data : formData, // our data object dataType : 'json', // what type of data do we expect back from the server encode : true }) // using the done promise callback .done(function(data) { // log data to the console so we can see console.log(data); // here we will handle errors and validation messages if ( ! data.success) { // handle errors for game --------------- if (data.errors.game) { $('#game-group').addClass('has-error'); // add the error class to show red input $('#game-group').append('' + data.errors.game + ''); // add the actual error message under our input } // handle errors for question --------------- if (data.errors.question) { $('#question-group').addClass('has-error'); // add the error class to show red input $('#question-group').append('' + data.errors.question + ''); // add the actual error message under our input } // handle errors for option --------------- if (data.errors.option) { $('#option-group').addClass('has-error'); // add the error class to show red input $('#option-group').append('' + data.errors.option + ''); // add the actual error message under our input } // handle errors for choice --------------- if (data.errors.choice) { $('#choice-group').addClass('has-error'); // add the error class to show red input $('#choice-group').append('' + data.errors.choice + ''); // add the actual error message under our input } } else { // ALL GOOD! just show the success message! $('form').append('' + data.message + ''); // usually after form submission, you'll want to redirect // window.location = '/thank-you'; // redirect a user to another page } }) // using the fail promise callback .fail(function(data) { // show any errors // best to remove for production console.log(data); }); // stop the form from submitting the normal way and refreshing the page event.preventDefault(); }); });
还有一个process.php
<?php //Include configuration file include('includes/config.php'); //Define variables $question=$_POST['question']; $game=$_POST['game']; $option=$_POST['option']; $choice=$_POST['choice']; //Generate random number $rand_value=rand(); //Create temporary folder mkdir($rand_value); //Copy page of Ask Poll copy('page.php', $rand_value . '/page.php'); rename($rand_value . '/page.php', $rand_value . '/index.php'); //Add data into database mysql_connect($db_host, $db_username, $db_password) or die ("Errore di connessione!"); mysql_select_db($db_name) or die ("Impossibile selezionare database!"); $sql1="CREATE TABLE `" . $rand_value . "` (Question VARCHAR(200), Options VARCHAR(200), Choice INT(11))"; mysql_query($sql1) or die ("Impossibile eseguire la query!"); //Count number of Options available $count=count($option); for ($i=0; $i
但是当我发送表单时，页面会将我重定向到process.php
我不希望该网站刷新页面
编辑
维尔纳，我按照你的建议添加preventDefault，但它不起作用:(
您的magic.js文件中存在语法错误。 您应首先启用控制台并观察其是否有错误。
Uncaught Error: Syntax error, unrecognised expression: input[name=option[]]
这是我在按下提交按钮时可以阅读的内容，然后在此之后退出以停止提交。
问题在于您创建formData的部分。 （通过http://api.jquery.com/serialize/，您可以更轻松地创建这些内容）
第15行有拼写错误。请注意额外的括号？ 即使它们在字段名称中，也不应添加括号。 我建议您使用Serialize解决方案或至少使用他们的ID选择字段（这是他们基本上的用途）。
$('input[name=option[]]') // Not valid $('#option') // Better way to select a field
希望这会让你朝着正确的方向前进。