Question

我正在使用jquery post方法发布从服务器获取的数据。

我使用从服务器获取的数据创建一个对象，并在jquery post方法中发送此对象，

现在我收到一条错误消息，说明媒体类型不受支持，

我创建的对象没有被发送，但数据正在作为表单数据发送

我应该如何避免发送此formdata并发送我创建的对象

看看我到目前为止编写的代码：

var submitLeadDetails = function(){
    console.log('Post function executed');
    var LeadDetailsObject = {};
    LeadDetailsObject.schoolName = document.getElementById('name').value;
    LeadDetailsObject.contactPerson = document.getElementById('contact').value;
    LeadDetailsObject.contactPersonPhoneNumber =document.getElementById('phone').value;
    LeadDetailsObject.date = document.getElementById('date').value;
    LeadDetailsObject.time = document.getElementById('time').value;
    console.log(LeadDetailsObject);
 
     $.post('http://localhost:8000/webapi/leads',  LeadDetailsObject, 'json')
         .done(function(data){
         console.log('Success');
        console.log(data);
         $('#leadDetailsForm')[0].reset();
         })
         .fail(function(xhr,status,error){
             console.log(LeadDetailsObject);
             console.log(error);
         })
}

<form id="leadDetailsForm" onsubmit="event.preventDefault();submitLeadDetails();">
                <div class="form-group">
                    <label for="name">School Name:</label>
                    <input type="text" class="form-control" id="name" placeholder="Enter School Name" name="name" required>
                </div>

                <div class="form-group">
                    <label for="contact">Contact Person:</label>
                    <input type="text" class="form-control" id="contact" placeholder="Enter Contact Person Name" name="Contact" required>
                </div>
                <div class="form-group">
                    <label for="phone">Phone Number:</label>
                    <input type="number" class="form-control" id="phone" placeholder="Enter Contact Person's Phone Number" name="phone" required>
                </div>
                <!--<div class="form-group">-->
                    <!--<label for="address">Address:</label>-->
                    <!--<textarea class="form-control" rows="5" placeholder="Enter School Address" id="address" required></textarea>-->
                <!--</div>-->
                <div class="form-group col-sm-6" style="padding-left: 0;">
                    <label for="date">Date:</label>
                    <input type="text" class="form-control" id="date" placeholder="Enter Date" name="date" required>
                </div>
                <div class="form-group col-sm-6">
                    <label for="time">Time:</label>
                    <input type="text" class="form-control" id="time" placeholder="Enter Time" name="Time" required>
                </div>
                <button type="submit"  class="btn  btn-lg pull-right" style="margin-top: 3%; background-color: #2a2c30; color:#fff;" >
                    Submit
                </button>
            </form>

如图所示，不应使用post方法发送表单数据

我创建的对象应该只发送

通过返回false并使用event.preventDefault（），它只是停止刷新表单。

Answer 1

请将您的AJAX通话更新为：

        $.ajax({
            url: 'http://localhost:8000/webapi/leads',
            type: 'POST',
            data: LeadDetailsObject,
            contentType: 'application/json',
            success: function(data){
                console.log('Success');
                console.log(data);
                $('#leadDetailsForm')[0].reset();
            },
            failure: function(xhr, status, error){
                console.log(LeadDetailsObject);
                console.log(error);
            }
        });

如何避免在使用jquery post方法时发布表单数据

1 个答案: