Question

这似乎应该是一件简单的事情，但事情仍然是错误的。我正在使用此页面顶部答案的代码：jQuery Ajax POST example with PHP

当我提交表单时，不是将该数据传递给upvote.php并相应地编辑数据库，而是将其重定向到/upvote.php?bar=hfAb1he49kk。它正在获取我需要的数据和重定向到php页面并添加数据url。为什么这样做？

PHP

<?php
// Create connection
$con=mysqli_connect("localhost","root","root","test");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM videos ORDER BY votes DESC");
while($row = mysqli_fetch_array($result)) {
  echo "<div class='entry'>";
  $id = $row['id'];
  echo "<form action='upvote.php'>
          <input type='hidden' name='bar' id='bar' value='" . $id . "' />
          <input type='submit' value='upvote'/>
        </form>";
  echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . stripslashes($row['id']) . '" frameborder="0" allowfullscreen></iframe>';
  echo $row['votes'];
  echo "</div>";
}
?>

JQuery的

<script>
var request;
// bind to the submit event of our form
$(form).submit(function(event){
if (request) {
    request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();

// let's disable the inputs for the duration of the ajax request
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);

// fire off the request to /form.php
request = $.ajax({
    url: "/upvote.php",
    type: "post",
    data: serializedData
});

// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
    // log a message to the console
    console.log("Hooray, it worked!");
});

// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
    // log the error to the console
    console.error(
        "The following error occured: "+
        textStatus, errorThrown
    );
});

// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
    // reenable the inputs
    $inputs.prop("disabled", false);
});

// prevent default posting of form
event.preventDefault();
});
</script>

upvote.php

<?php
$con=mysqli_connect("localhost","root","root","test");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$bar = $_POST['bar'];
mysqli_query($con,"UPDATE videos SET votes = votes + 1 WHERE id = '" . $bar . "'");
mysqli_close($con);
?>

Answer 1

可能会添加

event.preventDefault();

阻止表单操作

$("#foo").submit(function(event){
            event.preventDefault();

的Seb

Answer 2

function postData(event){
event.preventDefault()
$.ajax({
    type: "POST",
    url: "yourfile.php",
    data: $('#myForm').serialize()
    }).done(function( result ) {
        // do something
    });
}

<form id="myForm">
<input type="submit" onclick="postData(event)" value="submit">

在php文件中

$bar = $_POST['bar'];
$query = "UPDATE videos SET votes = votes + 1 WHERE id = '" . $bar . "'";
echo $query; //will echo you query to the done function of the ajax
exit();
mysqli_query($con,$query);
mysqli_close($con);

使用ajax从表单发送数据而不重定向

2 个答案: