Jquery Ajax自动刷新页面

时间:2015-01-16 10:37:16

标签: javascript jquery ajax

我是jquery / ajax的新手,我遇到了简单提交的问题。

我有一个简单的联系表格(帖子),表格上有姓名,电子邮件地址和请求。我调用一个更新sql server数据库上的表的ajax进程。当它返回成功时,我想显示一条消息,说明您的请求已被发送。但每次返回成功时页面都会刷新。

这是我的代码

<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> 
<!-- JS Implementing Plugins -->           
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/flexslider/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="assets/plugins/layer-slider/layerslider/js/greensock.js"></script>
<script type="text/javascript" src="assets/plugins/layer-slider/layerslider/js/layerslider.transitions.js"></script>
<script type="text/javascript" src="assets/plugins/layer-slider/layerslider/js/layerslider.kreaturamedia.jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/plugins/gmap/gmap.js"></script>
<script type="text/javascript" src="assets/plugins/sky-forms/version-2.0.1/js/jquery.validate.min.js"></script>

<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->           
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/layer-slider.js"></script>
<script type="text/javascript" src="assets/js/pages/BusyIndicator.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function ($) {   

        App.init();
        App.initSliders();

        renderc27slider();
        renderpage();

        LayerSlider.initLayerSlider();

        $("#btnSendRequest").click(function (data) {

            $("#div-validation-error").hide();
            $("#div-process-success").hide();

            var valid = $('#validation-form').valid();
            if (valid == false) {
                $('#div-validation-error').show();
            } else {
                ajaxindicatorstart("sending the request...please wait");

                var vname = $("#txtname").val();
                var vemailaddress = $("#txtemailaddress").val();
                var vrequest = $("#txtrequest").val();

                var jsonData = { name: vname, emailaddress: vemailaddress, request: vrequest };

                $.ajax({
                    type: "POST",
                    url: "Process.asmx/TryRVWEBRequest",
                    data: JSON.Stringify(jsonData),
                    datatype: "json",
                    success: function (data) {
                        if (data.d == "OK") {
                            alert("in Success=true");
                            $("#div-process-success").show();
                        } else {
                            alert("in Success=false");
                            $("#div-process-success").show();
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
            };
        });

        $('#validation-form').validate({
            rules: {
                txtname: {
                    required: true
                },
                txtemailaddress: {
                    required: true,
                    email: true
                },
                txtrequest: {
                    required: true
                }
            },
            messages: {
                txtname: {
                    required: "Please provide a name.",
                },
                txtemailaddress: {
                    required: "Please provide an email address",
                    email: "Please provide a valid email address"
                }
            }
        });
    });
</script>

这真的让我很难过,所以非常感谢任何帮助

1 个答案:

答案 0 :(得分:1)

在每个函数和成功结束时写入return false();

还有一件事,为什么使用这些标签?????