使用Ajax提交表单不起作用

时间:2015-02-19 04:17:08

标签: php jquery html ajax

我有一个按钮,一旦点击我使用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不工作?

0 个答案:

没有答案
相关问题