我有一个按钮,一旦点击我使用ajax从不同的文件加载HTML表单,代码就是这样,
$( "#newDeck" ).click(function() {
$( "#right-panel" ).load( "../HTML_files/new_deck.html" );
});
这是加载的HTML表单,
<form class="form-inline" id="new_deck_form" action="" method="post">
<div class="deck_name_holder">
</br>
</br>
</br>
</br>
Name the new Deck:
</br>
</br>
<!-- Text input-->
<div id="deck_nam_div" class="control-group">
<div class="col-xs-4 col-xs-offset-4">
<input id="deck_name" name="deck_name" type="text" class="form-control"
placeholder="Spanish 101" class="input-medium" required="">
</div>
</div>
</br>
</br>
<button id="name_deck_button" class="btn btn-primary" type="submit">Name Deck</button>
</div>
</form>
我正在尝试使用带有ajax的jQuery提交它,这是我的代码
$(document).ready(function(){
// process the form
$('#new_deck_form').submit(function(event) {
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'deckName' : $('input[name=deck_name]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : '../API/deck_api.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
});
});
});
我知道PHP代码有效,因为我最初使用它与javascript但是当我将代码更改为jQuery时它停止了工作。
当我按下按钮提交HTML表单页面时会发生什么情况会删除java代码为修改页面所做的所有修改。它好像是通过PHP提交页面。为什么我的jQuery不工作?