Question

正如标题所示，我希望通过post将表单提交到外部php文件，将数据添加到db，然后输出成功消息。

就目前而言，当我单击表单上的提交时，页面刷新但没有任何内容添加到数据库中。我没有得到任何消息。

这是我的代码：

jQuery的：

  $(document).ready(function(){
            $("form#submit").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var value = $("#dropdown").val();

    $.ajax({
        type: "POST",
        url: "add_to_shelf.php",
        data: "shelf="+ value +"&bookID="+ $_GET['id'],
        success: function(){
            $('form#submit').hide(function(){$('div.success').fadeIn();});

        }
    });
return false;
});
    });

HTML：

<form id="add_to_shelf_form" method="POST">
                    <select name="shelves" id="shelves">
                            <option value="1">Read</option>
                            <option value="2">Currently reading</option>
                            <option value="3">Want to read</option>
                     </select>  
                     <input type="submit" id="shelf_button" value="Submit" />
                     <p class="success">Shelf was successfully updated!</p>
            </form>

add_to_shelf.php：

include "base.php"; 
    include "session.php";

// SHELF INFORMATION
    $bookID = $_POST['bookID'];
$shelfID = $_POST['value']; 
    $userID = $_SESSION['user_id'];

$add_to_shelf  = "INSERT INTO books_on_shelves (bookID,shelfID,userID) VALUES ('$bookID','$shelfID','$userID')";
mysql_query($add_to_shelf) or die(mysql_error());

Answer 1

页面刷新可能是因为事件未被触发。返回false应该处理这个。

首先，我会将$("form#submit").submit更改为$("#add_to_shelf_form").submit这至少应该触发事件。

此外，你肯定想要逃避这一输入。不要将用户提供的数据插入数据库raw。在php中，改变这个：

$bookID = $_POST['bookID'];

为：

$bookID = mysql_real_escape_string($_POST['bookID']);

Answer 2

捕获提交的选择器不正确。根据您发布的HTML，您的表单的id为add_to_shelf_form，而不是您在选择器submit中使用的form#submit。

请改为尝试：

$("#add_to_shelf_form").submit(...

<强>更新

它在小提琴上不起作用的原因是因为数据中的PHP $_GET[".."]打破了JS。我还将数据添加为对象而不是变量，我相信它更具可读性。

我已经更新了你的小提琴，以便它起作用：http://jsfiddle.net/hYrrV/4/

在您的页面中，您需要将数据对象从我的静态bookId更改为PHP生成的动态：

data: { shelf: value, bookID: <?php echo $_GET['id']; ?> }

所以你的最终代码将是：

$(document).ready(function(){
    $("form#submit").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
    var value = $("#dropdown").val();

    $.ajax({
        type: "POST",
        url: "add_to_shelf.php",
        data: { shelf: value, bookID: <?php echo $_GET['id']; ?> },
        success: function(){
            $('form#submit').hide(function(){$('div.success').fadeIn();});

        }
    });

    return false;
    });
});

Answer 3

您的错误是您已将附加方法附加到ID为“提交”的提交按钮，而您的表单中并非如此。 Id f按钮是“shelf_button”所以它应该是

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

或者您只能在表单上附加活动。

Answer 4

将$("form#submit").submit(function() {更改为$("form").submit(function() {

Answer 5

试

var value = $（“＃dropdown option：selected”）。val（）;

而不是

var value = $（“＃dropdown”）。val（）;

因为您正在使用选择框。还有一件事尝试通过此

获取数据值

data：dataString，

之前确保获取dataString值类似

var dataString ='shelves ='+ shelf;

jQuery - 提交表单，添加到db表，返回成功。

5 个答案: