Question

我正在用PHP创建一个小型大学项目，我想在没有刷新的情况下提交表单。我使用以下代码，但它没有按预期工作。

usercss / demo.js

function newleadentryform(){

document.getElementById('RightPaneContainerDiv').innerHTML="<div id='leadgenerationformdiv'>"+
"<form  id='form' 'action='#'>"+
"<table width='352' border='0' class='CSSTableGenerator' style='width: 45%;'>"+
"<tr>"+
"<td>&nbsp</td>"+
"<td>&nbsp;</td>"+
"</tr>"+
  "<tr>"+
    "<td class='leadgenerationformcss'>Lead Owner</td>"+
    "<td><input name='leadowner' type='text' class='leadgenerationtextboxcss' id='leadowner' /></td>"+
  "</tr>"+
"<tr>"+
    "<td>"+
    "<input type='button' id='submit'  name='submit' value='Update' onclick='leadgenerationformvalidation()'/>"+
    "</td>"+
    "<td><input type='reset' value='reset'></td>"+
  "</tr>"+
"</table>"+
"</form>"+
"</div><!-- leadgenerationformdiv-->";  

}

的index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Examples of using jQuery Alerts</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery.ui.draggable.js" type="text/javascript"></script>

        <script src="jquery.alerts.js" type="text/javascript"></script>
        <link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

        <!-- Example script -->
        <script type="text/javascript">
            $(document).ready( function() {
                $("#submit").click( function() {
                    jAlert('Example of a basic alert box in jquery', 'jquery basic alert box');
                });
            });
        </script>
        <script src="userjs/demo.js"></script>
    </head>
    <body>
    </body>
    <a href="#" class="headerAnchorClass" onclick='newleadentryform()'>New Lead</a>
    </p>
    <div id="RightPaneContainerDiv" style=" float: left; margin-left: 11px; overflow-y: auto; height: 90vh;">
    </div>
</html>

当我点击“新主角”链接时，应该打开一个表单，其中包含一个文本字段和一个“更新”按钮，然后该按钮应该提交表单而不刷新。

我怎样才能实现我在这里想做的事情？提前谢谢。

Answer 1

您最好从文件中包含html，而不是将其作为字符串插入。你会看到可能的错误，它可以更好地编辑。或者你可以将它包含在页面上并在开始时通过css隐藏它，然后点击＆＃34; New lead＆＃34;链接只需致电$('form').show();。当您单击更新按钮时，您可能希望执行AJAX调用，这可以使用jQuery表单插件轻松完成。只需将其包含在＆＃34;更新＆＃34;按钮点击通话$('form').ajaxForm({url: 'filethatsavesyourpostdata.php', type: 'post'})

Answer 2

您应该使用AJAX。此外，通过函数获取HTML表单不一定是最好的方法，尤其是因为您在该表单中有静态内容。它应该在加载的页面上，但不应显示它，它应该从客户端隐藏，直到您单击页面上的 New Lead 链接。

那么，为了抓住点击，您需要做什么？您已经通过使用已弃用的（尚未正式弃用）单击 -function，这是在发生单击事件时触发的。但是，建议使用 on -function，并在其中定义您的事件和其他参数。

为了跳过实际点击事件并禁用页面刷新（实际上提交它作为指定方法和操作的真实表单），我们必须使用< strong> preventDefault -function to 取消默认操作，在这种情况下是默认的浏览器行为：按下提交按钮时提交表单。< / p>

所以现在我们最终得到的是实际发送表格。为了将它发送到服务器，我们应该使用AJAX，就像我在答案开头提到的那样。

AJAX的作用是，它基本上创建了一个 XMLHttpRequest对象并将其发送到服务器来处理并创建响应。然后，服务器将其发送回客户端，客户端在会话处于活动状态时读取它。使用此类技术（或类似技术）的网站称为动态网页，其中内容可能会在会话期间发生变化。

所以我们做的是，我们创建请求并将其发送到服务器进行处理，然后它返回给我们一些东西，然后客户端将处理并弄清楚。在这种情况下，我把它变得相当简单，我正在检查帖子字段的存在以及帖子字段的长度。如果帖子字段不存在，则会返回 bad-post 。如果该值小于或大于我指定的金额，在这种情况下五（5）和二十（20），它将返回 bad-长度即可。但如果一切顺利，它将返回成功，这是客户通常期待的响应。然后在客户端对此进行处理，浏览器将向客户端输出一个警告框，说明我们刚收到的内容。

<强>的index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Examples of using jQuery Alerts</title>

        <link href="jquery.alerts.css" rel="stylesheet" media="screen" />

        <style>
            #lead-container {
                margin-left: 11px;
                display: none;
                height: 90vh;
                float: left;
            }

            #lead-container form {
                border: 0;
                width: 45%;
            }
        </style>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <a href="#" id="create-new-lead">New Lead</a>

        <div id="lead-container">
            <form name="lead-creator">
                <table>
                    <tr>
                        <td>Lead Owner</td>
                        <td>
                            <input type="text" id="lead-owner-field" name="lead-owner" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="submit" id="submit-button" name="submit" value="Update" />
                        </td>
                        <td>
                            <input type="submit" id="reset-button" name="reset" value="Reset" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>

        <script>
            var isBeingSent = false;

            $(document).ready(function(){
                // We want to prevent default browser behavior when clicking the input buttons or the "New Lead" link
                $("#create-new-lead, #submit-button, #reset-button").on("click", function(e){
                    e.preventDefault();
                });

                // We want to display the lead-container when we click the "New Lead" link
                $("#create-new-lead").on("click", function(){
                    if (!$("#lead-container").is(":visible"))
                        $("#lead-container").show();
                });

                $("#submit-button").on("click", function(){
                    // We stop executing the event if the operation is already running
                    if (isBeingSent == true)
                        return false;

                    // We mark the operation running to avoid simultaneous actions
                    isBeingSent = true;

                    // We send a post request to the server
                    $.post(
                        "handler.php", // The file, which we are sending data to
                        { leadowner: $("#lead-owner-field").val() }, // The data, which we are sending
                        function(result){ // The returning function when the operation is complete
                            isBeingSent = false;

                            if (window.console)
                                console.log('Returned: [' + typeof(result) + '] ' + result);

                            if (result == "success") {
                                alert('All went well!');
                            }else if (result == "bad-length") {
                                alert('Hmm, the value is too small, or too lengthy!');
                            }else if (result == "bad-post") {
                                alert('Ouch, something went very, very wrong...');
                            }else{
                                alert('Wops! Returned: [' + typeof(result) + '] ' + result + '.');
                            }
                        }
                    );
                });

                // We reset the input field when we click the "Reset" button
                $("#reset-button").on("click", function(){
                    $("#lead-owner-field").val("");
                });
            });
        </script>

        <script src="jquery.ui.draggable.js"></script>
        <script src="jquery.alerts.js"></script>
    </body>
</html>

<强> handler.php

<?php
    // Did the client send us a valid post request?
    if (!isset($_POST["leadowner"]))
        die("bad-post");

    // Sanitize and finalize the input value
    $finalizedValue = preg_replace("/[^\w\s\.\-]/", "", $_POST["leadowner"]);

    // Compare the length of the input value against our specified values
    if (strlen($finalizedValue) < 5 || strlen($finalizedValue) > 20)
        die("bad-length");

    // If all went well, just return a success message
    die("success");
?>

我希望这可以帮助你解决问题。

编辑：改进了代码布局并添加了注释来解释功能。

Answer 3

你可以这样做：

<!DOCTYPE html>
<html>

<head>
  <title>Examples of using jQuery Alerts</title>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Example script -->
  <script type="text/javascript">
    $(document).ready(function() {
      $("#submit").click(function() {
        alert('Example of a basic alert box in jquery', 'jquery basic alert box');
      });
      $("#testing").click(function() {
        $("#RightPaneContainerDiv").show();
      });
    });
  </script>
  <script src="userjs/demo.js"></script>
</head>

<body>
  <a href="#" id="testing" class="headerAnchorClass" onclick="newleadentryform()">New Lead</a>
  <p></p>
  <div id="RightPaneContainerDiv" style="display:none;float: left; margin-left: 11px; overflow-y: auto; height: 90vh;">
    <div id='leadgenerationformdiv'>
      <form id='form' action='#'>
        <table width='352' border='0' class='CSSTableGenerator' style='width: 45%;'>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td class='leadgenerationformcss'>Lead Owner</td>
            <td>
              <input name='leadowner' type='text' class='leadgenerationtextboxcss' id='leadowner' />
            </td>
          </tr>
          <tr>
            <td>
              <input type='button' id='submit' name='submit' value='Update' onclick='leadgenerationformvalidation()' />
            </td>
            <td>
              <input type='reset' value='reset'>
            </td>
          </tr>
        </table>
      </form>
    </div>

  </div>
</body>

</html>

检查plunker：http://plnkr.co/edit/ODJB24Y6q5xT8jvZjFNM?p=preview

如何在按钮点击时调用jquery函数？

3 个答案: