ajax後jquery onclick

我有一個按鈕，調用模式框淡入屏幕說，從按鈕發佈的值然後淡出，這工作正常使用jquery，但我也想在同一點擊發送的值從按鈕被髮布到一個PHP函數，運行和模態框仍然淡入和淡出。ajax後jquery onclick

我只有這個讓我的網站知道JS來使用：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

我還是一個菜鳥問題新很抱歉，但將允許AJAX運行，還是隻爲jQuery的？

我想目前的腳本是：（編輯，以正確地形成，基於答覆，但現在什麼也沒有發生的話）

<script> 
$('button').click(function() 
{ 

    var book_id = $(this).parent().data('id'), 
    result = "Book #" + book_id + " has been reserved."; 

    $.ajax 
    ({ 
     url: 'reservebook.php', 
     data: "book_id="+book_id, 
     type: 'post', 
     success: function() 
     { 
      $('.modal-box').text(result).fadeIn(700, function() 
      { 
       setTimeout(function() 
       { 
        $('.modal-box').fadeOut(); 
       }, 2000); 
      }); 
     } 
    }); 
}); 
</script>

雖然這種模式對話框甚至不發生。

的PHP是，resersebook.php：

<?php 

session_start(); 

$conn = mysql_connect('localhost', 'root', ''); 
     mysql_select_db('library', $conn); 

    if(isset($_POST['jqbookID'])) 
    { 
     $bookID = $_POST['jqbookID']; 

     mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn); 
    } 

?>

，並徹底，按鈕是：

<div class= "obutton feature2" data-id="<?php echo $bookID;?>"><button>Reserve Book</button></div>

我是新來的這一點，我已經看了幾十個其他這裏有類似的問題，這是我如何獲得我當前的腳本，但它不起作用。

不確定它是否重要，但只有工作模式框的腳本必須在html正文的底部才能工作，不確定是否由於某種原因ajax需要位於頂部，但隨後模態框不起作用，只是一個想法。

來源

2013-12-12 Vereonix

** **危險：您正在使用[**的**過時的數據庫API（http://stackoverflow.com/q/12859942/19068），並應使用[現代更換]（http://php.net/manual/en/mysqlinfo.api.choosing.php）。你也**易受[SQL注入攻擊]（http://bobby-tables.com/）**，現代的API會使[防禦]更容易（http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php）自己從。 – Quentin

啊謝謝你，我一直被告知這個，並且我保持閱讀它的意思並遷移。 – Vereonix

你是否嚴重不使用'mysql_real_escape_string（）'，'htmlspecialchars（）'和'filter_input（）'?! SQL注入只是一個問題。 '<？php echo $ bookID;？>'也會導致XSS。 ''，''''後面''缺少'type'：'post''後面的' – mgutt

試試這個。編輯到最終答案。

按鈕：

<div class= "obutton feature2" data-id="<?php echo $bookID;?>"> 
    <button class="reserve-button">Reserve Book</button> 
</div>

腳本：

<script> 
$('.reserve-button').click(function(){ 

    var book_id = $(this).parent().data('id'); 

    $.ajax 
    ({ 
     url: 'reservebook.php', 
     data: {"bookID": book_id}, 
     type: 'post', 
     success: function(result) 
     { 
      $('.modal-box').text(result).fadeIn(700, function() 
      { 
       setTimeout(function() 
       { 
        $('.modal-box').fadeOut(); 
       }, 2000); 
      }); 
     } 
    }); 
}); 
</script>

reservebook.php：

<?php 
session_start(); 

$conn = mysql_connect('localhost', 'root', ''); 
mysql_select_db('library', $conn); 

if(isset($_POST['bookID'])) 
{ 
    $bookID = $_POST['bookID']; 

    $result = mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn); 

    if ($result) 
     echo "Book #" + $bookId + " has been reserved."; 
    else 
     echo "An error message!"; 
} 
?>

PS＃1：對mysqli的更改對您的代碼而言是最小的，但強烈建議。

PS＃2：在Ajax調用上的success並不意味着query成功。只意味着Ajax事務處理正確並得到滿意的響應。這意味着，它發送到url正確的數據，但並不總是url做了正確的事情。

來源

2013-12-12 13:03:02 Minoru

還是什麼都沒發生。這是我第一次使用ajax，並且它不太好。我瞭解所有的代碼，但它不起作用。模態本身是可以工作的，但是通過引入ajax，事情並沒有發生，有沒有什麼能夠阻止Ajax運行？還不確定我的眼睛在起作用，但腳本中是否有缺失的右括號？以及我關閉的情況下，仍然沒有：/ – Vereonix

@Tom它是否在數據庫中插入任何東西？或者它根本不做任何事情？ – Minoru

@Tom再次嘗試編輯的代碼。只需更改Ajax調用中的'data'字段即可。 – Minoru

您的Ajax是不好形成的，您需要sucsses事件。當你調用ajax並且它成功時，它會顯示響應。

$.ajax 
     ({ 
      url: 'reserbook.php', 
      data: {"book_id":book_id}, 
      type: 'post', 
      success: function(data) { 
       $('.modal-box').text(result).fadeIn(700, function() 
       { 
        setTimeout(function() 
        { 
        $('.modal-box').fadeOut(); 
        }, 2000); 
       }); 
       } 
      }

編輯：

另外重要的一點是data: "book_id="+book_id，這應該是data: {"book_id":book_id}，

來源

2013-12-12 12:37:54

'。 – dbf

我已將ajax更改爲此，但現在沒有任何反應，我已更新我的發佈以顯示我的完整腳本，可能已將其搞亂。雖然，但你可能會面臨手掌，在我的reservebook.php我需要：或者它是否能夠獲得變量，而且腳本也會允許這個ajax正常工作，它不僅僅適用於jquery？：S – Vereonix

@Tom如果你複製並粘貼我更新答案，因爲我錯過了'，'但Jquery庫不是問題。 –

您的AJAX定義錯誤。它應該是：

$.ajax 
({ 
    url: 'reserbook.php', 
    data: "book_id="+book_id, 
    type: 'post', 
    success: function() 
    { 
     $('.modal-box').text(result).fadeIn(700, function() 
     { 
      setTimeout(function() 
      { 
       $('.modal-box').fadeOut(); 
      }, 2000); 
     }); 
    } 
});

來源

2013-12-12 12:39:19 floriangosse

$.ajax 
({ 
    url: 'reservebook.php', 
    data: { 
    jqbookID : book_id, 
    }, 
    type: 'post', 
    success: function() 
    { 
     $('.modal-box').text(result).fadeIn(700, function() 
     { 
      setTimeout(function() 
      { 
       $('.modal-box').fadeOut(); 
      }, 2000); 
     }); 
    } 
});

}）;

試試這個

來源

2013-12-12 14:12:49 Abhisek

ajax後jquery onclick

回答

相關問題