最受欢迎

在jQuery.load之后操作表单值

Manipulating Form Values After jQuery.load

本文关键字：操作表 表单 操作 之后 jQuery load | 更新日期: 2024-04-10

大家晚上好，

我目前正在尝试清理我的内联JS，并将其分解为自己的.JS文件，同时将我的一些代码分解为函数。下面我提供了我的代码，我有一个HTML文件，其中有一个名为#main的空div。在文档就绪时，我想调用我的firstLoad函数。它只是调用$("#main").load("login.php");似乎很简单，但我的下一步是，在提交表单时，我想序列化提交的数据，转向字符串并通过post提交。出于某种原因，如果我将表单硬编码到index.php文件中，这将起作用，但如果我使用.load填写#main，则不会起作用。我不明白为什么会这样，我相信这很简单，如果有人能解释得很少，那就太棒了。我的代码如下：

更新经过更多的搜索，我发现了这个帖子，上面写着：

事实证明，jquery.load（）函数运行得非常完美，而我处理这个错误。

一旦.load（）函数成功完成，它就会调用程序员包含的"回调"函数，与其他函数一样jquery函数，该函数接受回调作为其"参数"之一.load（）函数一旦出错或成功就完成了开始HTML替换和加载新内容，但这是信息技术内容将需要很长时间才能加载，但您.load调用在此之前已经完成。因此，期望加载.load内容后运行的回调将仅让你失望。）

我希望其他人能像我一样从中吸取教训，包括那些我以为事实就是这样。证明：如jquery中所述loadpage，当请求完成时执行回调，而不是在加载完成时。尤里卡。哇。

这就引出了接下来的问题，在加载内容添加到DOM后，我如何操作表单？这当然是一个简单的修复，但我是AJAX的新手，可以朝着正确的方向推动。我注意到在login.php脚本中添加一个文档（就绪）可以正常工作，因为它是用html添加的，但这似乎不是最干净的方式，因为我试图屏蔽内联JS。还有什么建议吗？

/UPDATE

PHP/HTML/

index.php

<?php
    session_start();
    $sessionNumber = session_id();
?>
<!doctype html>
<!-- Conditional comment for mobile ie7 blogs.msdn.com/b/iemobile/ -->
<!--[if IEMobile 7 ]>    <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>MyMobile</title>
  <meta name="description" content="">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
  <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
  <link rel="shortcut icon" href="img/l/apple-touch-icon.png">
  <meta http-equiv="cleartype" content="on">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
  <div id="container">
    <header id="header">
        <img alt="Logo" src="img/logo.png" />
        <div id="blackHead">Please sign-in to continue</div>
    </header>
    <div id="main" role="main">
    </div>
    <footer id="footer">
        <div id="greyFoot">
            &copy; 2012 ACME<br />
            <pre id="result"></pre>
        </div>
    </footer>
  </div> <!--! end of #container -->

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><'/script>')</script>
  <script type="text/javascript" src="js/firstLoad.js"></script>
</body>
</html>

login.php

<?php session_start();
    $sessionNumber = session_id();
?>

<!-- begin login form -->
<?php if(isset($_SESSION['sessionemail'])){ ?>
    <a href="logout.php" id="logout">Logout</a>
<?php }else { ?>
<form id="logForm" name="login" method="post" action="#">
    <label for="sessionemail">Email</label><br />
    <input id="sessionemail" type="email" name="sessionemail" autofocus="autofocus" autocapitalize="off" maxlength="150" required="true" value="" class="inputText" /><br />
    <label for="password">Password</label>
    <input id="password" type="password" name="password" required="true" value="" class="inputText" /><br />
    <br />
    <input type="hidden" name="sessionid" id="sessionid" value="<?php echo $sessionNumber; ?>" />
    <input type="hidden" name="subtocall" id="subtocall" value="g2.web.login.sub" />
    <input type="submit" value="Sign-In" name="submit" class="submitBox" />
</form><!-- end login form -->
<?php } ?>

最后，我的JS/Jquery

firstLoad.js

//function serializes our object
(function($){
    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery);

//firstLoad function runs on document ready
//it loads the login form into the main div and slides
//the container down
(function($){
    $.fn.firstLoad = function(){
        return this.each(function() {
            $("#container").slideUp("slow", function(){
                $("#main").load('./login.php', function(){
                    $("#container").slideDown("slow", function(){
                    });
                });
            });
        });
    };
})(jQuery);
//logParse takes the loginResponse from the server
//changes from string to object, runs a check for authentication then
//manipulates the object dropping excess keys and adding new relevant ones for
//the intial to do list call
(function($){
    $.fn.logParse = function(xml){
        return this.each(function() {
            //parse the JSON login check string from the XML response
            var loginResponse = $(xml).find('string').text();
            //setup isBad variable for error check
            var isBad = false;
            //convert to JSON object from parsed string data
            loginResponse = $.parseJSON(loginResponse);
            //check if the sessionID is correct and user authenticated properly
            if((loginResponse.SESSIONID != "<?php echo $sessionNumber; ?>") || (loginResponse.ISAUTHENTICATED == 0)){isBad = true;}
            //if error flag is raised alert and bounce back to login
            if(isBad){
                alert("Unauthorized connection, please try again.");
            }
            //if there are no errors
            else{
                alert("so far so good!");
                //set up a new JSON object for to do list passback
                //and import the values from the lognResponse object
                //var todoPost =
            }
        });
    };
})(jQuery);
$(document).ready(function(){
    //hide screen for slidedown
     //$("#container").addClass("noShow");
    //allow cross domain scripts
    $.support.cors = true;
    //call firstLoad function to slide in the login prompt
    $("#main").firstLoad(function(){

        //create JSON object to store form input for AJAX POST
        //create submit listener
        $("#logForm").submit(function(){
            alert("inside submit");
            //parse form into formObj for data passing and manipulation
            var formObj = JSON.stringify($("form").serializeObject());
            //output initial formObj into result pane
            $("#result").text(formObj);
            $("#main").text("submitted: " + formObj);
            //AJAX POST call
            $.ajax({
                //type of communication
                type: "POST",
                //action for form
                url: "http://mydomain.com/JSONService.asmx/G2WebRequest",
                //data to be passed
                data: "request="+ formObj,
                //type of data passed in
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                //enable cross domain
                crossDomain: "true",
                //data type returned from webservice
                dataType: "xml",
                //if login POST was successful
                success: function(xml){
                    alert("post successful");
                    $.logParse(xml);
                },
                //if login POST failed
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    alert(errorThrown);
                }


            });
        });
    });
});

在登录表单完全加载到DOM之前，您可能正在$("#logForm")上设置侦听器。这将解释为什么登录表单在硬编码时可以工作。您可以通过alert($("#logForm").length);对此进行测试-如果找不到，则为零。

如果是这种情况，则需要确保在尝试附加侦听器之前等待登录页面完全加载。一旦load完成，我可能会让firstLoad调用一个函数。

祝你好运。

JQuery.on()解决了这个问题。我花了一段时间才弄明白。

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习