Question

这是我的jquery方法：

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

这是调用方法的表单：

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

虽然我的代码设法通过以下格式成功发送json到服务器：

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

我正在接收错误状态，因为我在浏览器控制台中收到以下错误：

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

同样点击提交按钮，当网址更改为：

时，显然会发送获取请求

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

并且整个页面重新加载，尽管它是一个ajax调用？我在我的智慧结束这个问题似乎没有任何意义，请指导..

Answer 1

在JSON中使用双引号。此外，如果您不希望实际提交表单，请挂钩表单提交事件并使用event.preventDefault（），而不是在onclick属性中调用该函数。

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

或更新您的功能：

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

  // your function body here
}

并使用：

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

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

1 个答案: