尽管成功传输了json，我的Jquery.ajax方法仍在响应中显示错误状态

Question

This is my jquery method :

<script>
    function onNotify() {
        console.log(jQuery('form #Name').val());
        var deviceInfo = platform;
        var for_name = jQuery('form #Name').val();
        console.log(for_name);
        var for_email = jQuery('form #Email').val();
        var for_phone = jQuery('form #phone').val();
        var for_checkindate = jQuery('form #date-picker-2').val();

        var for_checkoutdate = jQuery('form #date-picker-out').val();
        console.log(for_checkindate);
        console.log(for_checkoutdate);
        var appointment = {
            "inquirer": for_name,
            "email": for_email,
            "phone": for_phone,
            "checkoutDate": for_checkoutdate,
            "checkinDate": for_checkindate,

        };
        console.log(appointment);
        var hostname = document.URL.concat("bookings");
        console.log(hostname);
        jQuery.ajax({
            type: "POST",
            url: document.URL.concat("bookings"),
            crossDomain: true,
            data: appointment,
            dataType: "json",
            success: function (response) {
                setTimeout(90000);
                console.log("response with:", response);
            },
            error: function (error) {
                console.log("ERROR:", error);
            },
            complete: function () {
                jQuery('#Message-success-label').show();
                jQuery('#Message-success-label').fadeOut(8000);
                jQuery('form #Name').val('');
                jQuery('form #Email').val('');
                jQuery('form #phone').val('');
                jQuery('form #date-picker-2').val('');
                jQuery('form #date-picker-out').val('');
                console.log("done");
            }
        });
    }
</script>

And this the form calling the method :

<form class="form-inline" role="form">

        <div class="slideform form-group">
            <label style="font-family:'Source Sans Pro';font-weight:400" for="Name">Name</label>
            <input type="name" class="form-control" id="Name" placeholder="Name" name="your-name" required="">
        </div>
        <div class="slideform form-group">
            <label style="font-family:'Source Sans Pro';font-weight:400" for="phone">Phone Number</label>
            <input type="number" class="form-control" id="phone" placeholder="Phone Number" name="your-phone" required="">
        </div>
        <br>
        <br>
        <div class="slideform form-group">
            <label style="font-family:'Source Sans Pro';font-weight:400" for="Email">Email</label>
            <input type="email" class="form-control" id="Email" placeholder="Email" name="your-email" required="">
        </div>
        <div class="slideform checkin form-group date-form form-horizontal">
            <div class="control-group">
                <label style="font-family:'Source Sans Pro';font-weight:400" for="date-picker-2" class="control-label">Check In</label>
                <div class="input-group controls">
                    <input id="date-picker-2" type="text" class="date-picker form-control" placeholder="Check In" name="your-checkindate" required="">
                    <label for="date-picker-2" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
                    </label>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="slideform checkout form-group date-form form-horizontal">
            <div class="control-group">
                <label style="font-family:'Source Sans Pro';font-weight:400" for="date-picker-2" class="control-label">Check Out</label>
                <div class="input-group controls">
                    <input id="date-picker-out" type="text" class="date-picker form-control" placeholder="Check Out" name="your-checkoutdate" required="">
                    <label for="date-picker-out" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
                    </label>
                </div>
            </div>
        </div>


        <input type="submit" onclick="onNotify()" class="btn btn-default" value="Book a stay">
        </button>
        <p><span style="color:red;display:none" id="messagebook-success"><label id="Message-success-label" class="success-message">Thank you. We have received your request and shall revert shortly.</label></span>
        </p>
    </form>

While my code manages to send the json across to server via post successfully of this format :

{ inquirer: 'Jon',
  email: 'jogn@example.com',
  phone: '34659124',
  checkoutDate: '12/18/2014',
  checkinDate: '12/03/2014' }

I am recieving an error status it seems because, I am getting the following error in my browser console :

ERROR: 
Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}

Also on click of the submit button a get request is sent across apparently as url changes to :

http://localhost:9001/?your-name=Jon&your-phone=34659124&your-email=jon%40example.com&your-checkindate=12%2F03%2F2014&your-checkoutdate=12%2F18%2F2014

and the whole page reloads despite it being an ajax call? I am at my wits end with this problem nothing seems to make sense please guide..

Answer 1

Use double quotes in your JSON. Also, if you don't want the form to be actually submitted, hook the form submit event and use event.preventDefault() rather than calling the function in onclick attribute.

$( "#myForm" ).submit( function(event) {
    event.preventDefault();
    onNotify();
});

Or update your function:

function onNotify(event) {
  event.preventDefault();

  // your function body here
}

And use:

$( "#myForm" ).submit( onNotify );