Question

我正在开发单页面应用程序，使用许多ajax调用来检索和存储数据.... 我还使用.show()和.hide()方法使页面用户友好.... 可以看出，两个div参与了hide和show

每个函数都运行正常，每个ajax调用都是正确的.... 设计在最后一次通话后搞砸了我将在我的问题的最后描述......

HTML

<section class="block remove-top" id="contact-us" style="display: none;">
 <div id="message"></div>
 <form method="post" name="contactform" id="contactform">
 <div class="row">
  <div class="col-md-12">
  <div id="selectedPackage"></div>
  </div>

  <div class="col-md-12">
  <label>Email *</label>
  <input name="Email" type="text" id="Email" placeholder="Your Email" />
  <div id="emailCkh" style="font-size: medium; font-weight: normal; color: red;"></div></div>

  <div class="col-md-12">
   <label>Password *</label>
   <input name="password" type="password" id="password" class="input-style" placeholder="Enter Password" />
   </div>

   <div class="col-md-12">
   <label>Confirm Password *</label>
   <input name="confirmpassword" type="password" id="confirmpassword" class="input-style" placeholder="re-enter password" />
   <div id="pass" style="font-size:medium;font-weight:normal;color:red;"></div>
    </div>
    </div>
    </form>
</section>

<section class="block remove-top" id="SecondInfo" style="display: none;">
</section>

Ajax Call

<script>
    $("#btnSubmit").click(function () {
        var pkg = '@HttpContext.Current.Session["Package"]'
        data = $('#password').val();
    var len = data.length;   
    if(len < 1) {
        $("#pass").html("Password cannot be empty");
        event.preventDefault();
    }    
    else if($('#password').val() != $('#confirmpassword').val()) {
        $("#pass").html("Password should match");
        event.preventDefault();
    }
    else
    {
        var Email = $('#Email').val();
        var password = $('#password').val();
        $.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "Home")',
            dataType: "JSon",
            data: {"Email": Email, "password": password},
            success: function (data) {
                if (data == "success") {
                    if (pkg == 5) {
                        $('#contact-us').hide();
                        $('#scc').show();
                        $('contact-us').animate({ scrollTop: $('#scc').offset().top }, 'slow');
                    }
                    else {
                        $('#contact-us').hide();
                        $('#SecondInfo').show();
                        $('contact-us').animate({ scrollTop: $('#SecondInfo').offset().top }, 'slow');
                    }
                }
                else if (data == "fail") {
                    $("#emailCkh").html("Email Exists");
                }
                else
                {
                    $("#emailCkh").html("Server Error");
                }
            },
            error: function (data, jqXHR, exception) {
                //some errors defined
            }
            });
    }
        });   
</script>

很抱歉发布了我的大部分代码，虽然我缩短了它。调用{ data == "fail" }部分时会出现问题....它将更新div，它会告诉用户他已经输入已经在db中的电子邮件，尝试另一个.... Div已成功更新并且在2之后， 3秒整个html搞砸了....

可能是什么原因导致......任何想法......？

一些截图可以更好看（浏览器缩小以查看完整视图）...

前 before ajax call

后 after ajax call

enter image description here

Answer 1

运行你的代码我看到了一些违规行为，不确定他们是否会解决你的问题，但可能值得一试，在修复了我认为可能是错误之后我想出了这段代码：

<script>
    $("#btnSubmit").click(function (event) {
        var pkg = '@HttpContext.Current.Session["Package"]'
        data = $('#password').val();
    var len = data.length;   
    if(len < 1) {
        $("#pass").html("Password cannot be empty");
        event.preventDefault();
    }    
    else if($('#password').val() != $('#confirmpassword').val()) {
        $("#pass").html("Password should match");
        event.preventDefault();
    }
    else
    {
        var Email = $('#Email').val();
        var password = $('#password').val();
        $.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "Home")',
            dataType: "JSon",
            data: {"Email": Email, "password": password},
            success: function (data) {                    
                if (data == "success") {
                    $('#contact-us').hide();
                    if (pkg == 5) {                            
                        $('#scc').show();
                        $('#contact-us').animate({ scrollTop: $('#scc').offset().top }, 'slow');
                    }
                    else {
                        $('#SecondInfo').show();
                        $('#contact-us').animate({ scrollTop: $('#SecondInfo').offset().top }, 'slow');
                    }
                }
                else if (data == "fail") {
                    $("#emailCkh").html("Email Exists");
                }
                else
                {
                    $("#emailCkh").html("Server Error");
                }
            },
            error: function (data, jqXHR, exception) {
                //some errors defined
            }
            });
    }
 });   
</script>

不要注意格式错误。

我做了什么：

在click函数中添加了事件变量（对于event.preventDefault（），甚至不确定它是否有必要，但它看起来更干净，更易读）把你的$（＆＃39; #contact-us＆＃39;）。hide（）;在if / else块中调用if / else之外的内容，因为它在if块和else块中被调用将$（＆＃39; contact-us＆＃39;）。animate（）更改为$（＆＃39; #contact-us＆＃39;）。animate（）

在ajax调用响应后，html设计搞砸了

1 个答案: