Попытка отправить данные в базу данных с помощью AJAX (CI)

Question

У меня проблема с моим AJAX, не отправляя никаких данных в мою базу данных, я изогнул интернет в сухом виде, и теперь я оказался здесь.

Я попытался в Postman, вставив данные Json (см. Ниже), и я сделал POST для своего метода в контроллере API (user/add_user), мой контроллер затем запускает запрос из моей модели и вставляется в базы данных правильно.

{ 
"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 не быть перечислены :(

Вот моя функция, которая загружает HTML в моем API (только так вы можете увидеть 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); 
    } 
}); 
} 

Как я уже сказал, я знаю, что мой контроллер и модель работают, поскольку он работает в POSTMAN, но, тем не менее, дайте мне знать, могу ли я поделиться этим также, , чтобы вы могли лучше помочь? :)

Btw plz bear with me, так как это моя первая запись на переполнение стека, и я также довольно новичок в кодировании в genral.

Заранее благодарен сообществу! :)

Answer 1

Я думаю, проблема в том, как вы делаете свои .ajax(). Давайте немного изменим его.

Поскольку вы используете делегирование событий, получите элемент, содержащий ваши входы, то есть #main, используя e.delegateTarget. Затем используйте хороший метод под названием .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);