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);
    }
}); 
}

就像我说我知道我的控制器和模型正在工作，因为它在POSTMAN中工作，但是，如果我也应该分享它，请尽情告诉我，为了你能够更好地帮助你？ :)

顺便说一句，跟我一起来，因为我这是我第一次发表关于堆栈溢出的帖子，而且我也很喜欢编码。

提前感谢您真棒！ :)

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);

尝试使用AJAX（CI）将数据发送到数据库

1 个答案: