试图发送数据到数据库与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);