試圖發送數據到數據庫與AJAX（CI）

Question

我有一個問題，我的AJAX，沒有發佈任何數據到我的數據庫，我GOOGLE了互聯網幹，現在我結束了在這裏。我試過在Postman中插入我的Json數據（見下面），並且在我的API控制器（user/add_user）中對我的方法做了一個POST，然後我的控制器從我的模型運行查詢，然後將它插入到數據庫正確。

{ 
"first_name": "Admin", 
"last_name": "Panna", 
"email": "Admin2@mail.com", 
"password": "Admin1234", 
"phone_number": "12345678", 
"address": "Nowhere 1", 
"city": "somwhere", 
"country": "Germany", 
"nationality": "Finnish", 
"speak_danish": "1", 
"colleague": "Dora The Explorer", 
"task": "Security" 
} 

所以這個問題是真的，我的前端，用我的jQuery Ajax調用是不是做一個POST，或至少不正確的，因爲我看不到任何數據被髮送的任何地方，並在瀏覽器的控制檯工具在網絡選項卡中，沒有POST方法被列爲:(

這裏是我的功能加載在我的API的HTML（只是讓你可以看到HTML代碼）

function registrationPage() { 
var html = 
    '<div class="register-text container">' 
     +'<h3>You are about to register as a volunteer for</h3>' 
     +'<img src="' + RESS +'img/tinderbox_date.svg">' 
    +'</div>' 
    +'<div class="register-input container">' 
     +'<div>' 
      +'<input id="email" type="email" name="email" placeholder="Email">' 
      +'<input id="password" type="password" name="password" placeholder="Password">' 
      +'<input id="first_name" type="text" name="first_name" placeholder="First Name">' 
      +'<input id="last_name" type="text" name="last_name" placeholder="Last Name">' 
      +'<select id="gender" name="gender" placeholder="Gender">' 
       +'<option value="" disabled selected>Gender</option>' 
       +'<option value="1">Female</option>' 
       +'<option value="0">Male</option>' 
      +'</select>' 
      +'<label for="dateofbirth">Date of Birth</label>' 
      +'<input id="dateofbirth" placeholder="Date of Birth" type="date" name="dateofbirth" >' 
      +'<select id="nationality" name="nationality" >' 
       +'<option value="nationality" disabled selected>Nationality</option>' 
       +'<option value="Danish">Danish</option>' 
       +'<option value="German">German</option>' 
       +'<option value="norwegian">Norwegian</option>' 
      +'</select>' 
      +'<div class="upload-image">' 
       +'<img src="images/picture.svg">' 
       +'<p>Upload image</p>' 
      +'</div>' 
      +'<input id="phonenumber" type="number" name="phonenumber" placeholder="Phonenumber">' 
      +'<input id="address" type="text" name="address" placeholder="Address">' 
      +'<select id="country" name="country" placeholder="Country">' 
       +'<option value="Denmark">Country</option>' 
       +'<option value="Denmark">Denmark</option>' 
       +'<option value="germany">Germany</option>' 
       +'<option value="Norway">Norway</option>' 
      +'</select>' 
      +'<input id="zipcode" type="number" name="zipcode" placeholder="Zip code">' 
      +'<input input="city" type="text" name="city" placeholder="City">' 
      +'<select id="speak_danish" name="speak_danish">' 
       +'<option value="danish" disabled selected>Speak and understand Danish</option>' 
       +'<option value="1">Yes</option>' 
       +'<option value="0">No</option>' 
      +'</select>' 
      +'<select id="task" name="task">' 
       +'<option value="tasks" label disabled selected>Preferred work tasks</option>' 
       +'<option value="fences">Building Fences</option>' 
       +'<option value="bartender">Bartender</option>' 
       +'<option value="it-work">IT Work</option>' 
      +'</select>' 
      +'<input id="colleague" type="text" name="colleague" placeholder="I like to work with (name)">' 
      +'<button class="link-register-user" type="submit" value="REGISTER">Register</button>' 
     +'</div>' 
    +'</div>'; 

jQuery('#main').html(html); 
} 

和AJAX我對此有支持

function register(e) { 
e.preventDefault(); 

var emailVal = jQuery('#email').val(); 
var passwordVal = jQuery('#password').val(); 
var first_nameVal = jQuery('#first_name').val(); 
var last_nameVal = jQuery('#last_name').val(); 
var genderVal = jQuery('#gender').val(); 
var dateofbirthVal = jQuery('#dateofbirth').val(); 
var phone_numberVal = jQuery('#phone_number').val(); 
var addressVal = jQuery('#address').val(); 
var cityVal = jQuery('#zipcode').val(); 
var zipcodeVal = jQuery('#city').val(); 
var countryVal = jQuery('#country').val(); 
var nationalityVal = jQuery('#nationality').val(); 
var speak_danishVal = jQuery('#speak_danish').val(); 
var colleagueVal = jQuery('#colleague').val(); 
var taskVal = jQuery('#task').val(); 
var sendData = { 
     "email": emailVal, 
     "password": passwordVal, 
     "first_name": first_nameVal, 
     "last_name": last_nameVal, 
     "gender": genderVal, 
     "dateofbirth": dateofbirthVal, 
     "phone_number": phone_numberVal, 
     "address": addressVal, 
     "city": cityVal, 
     "zipcode": zipcodeVal, 
     "country": countryVal, 
     "nationality": nationalityVal, 
     "speak_danish": speak_danishVal, 
     "colleague": colleagueVal, 
     "task": taskVal 
}; 
    jQuery.ajax({ 
    url: URL + 'user/add_user', 
    contentType: 'application/json', 
    type: 'POST', 
    data: JSON.stringify(sendData), 
    success: function(data, status, response) { 
     console.log('Success'); 
    }, 
    error: function(xhr, status, error) { 
     var err = JSON.parse(xhr.responseText); 
     console.log(sendData); 
    } 
}); 
} 

就像我說的，我知道我的控制器和模型的工作，因爲它工作在郵遞員，但沒有少讓我知道我是否應該共享同樣， 你能夠幫助更好的呢？ :)

順便說一句plz熊與我，因爲我這是我有史以來第一次發佈堆棧溢出，我也是相當新的genral編碼。

非常感謝您的超棒社區！ :)

Answer 1

我認爲問題是你如何做你的.ajax()選項。讓我們稍微改變它。

由於您使用的是事件委託，請使用e.delegateTarget獲取包含輸入的元素，即#main。然後使用稱爲.serialize()的好方法來序列化所有表單輸入。 （您可能需要重命名你的一些輸入name屬性來傳遞正確的格式的鍵值對，你正在處理他們在服務器端）。

我不是太肯定contentType的選擇，因爲我我從來沒有用過任何東西，所以我也刪除它。基於帕特里克的評論，它會產生不希望的行爲。

因此，代碼將簡單地看起來像

function register(e) { 
    e.preventDefault(); 
    jQuery.ajax({ 
     url: URL + 'user/add_user', 
     type: 'POST', 
     data: jQuery(e.delegateTarget).find(':input').serialize(), 
     success: function (data, status, response) { 
      console.log('Success'); 
     }, 
     error: function (xhr, status, error) { 
      var err = JSON.parse(xhr.responseText); 
      console.log(sendData); 
     } 
    }); 
} 

// somewhere 
jQuery('#main').on('click', 'link-register-user', register);