Question

我在注册表单（jquery）编码方面遇到问题，不知道如何进行。我想做的是用jquery，ajax和php / mysql实现一个标准的注册表单。

问题是，当我在Chrome中运行页面时，出现错误消息：超出了最大单元堆栈大小。我看了很多遍代码，检查了方括号，圆点等，却找不到问题。

代码应-单击“创建帐户”按钮后-验证表单并调用php脚本registerEngine.php 我在服务器端登录，看不到该脚本的任何日志。

任何人都可以查看下面的代码和问题可能在哪里的建议吗？（代码是Internet上几个示例的汇编。）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<link rel="stylesheet" href="css/login.css">
<script src="js/produkty.js" defer></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $( function() {
    var dialog, form,

      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      name = $( "#name" ),
      email = $( "#email" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).add( email ).add( password ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false;
      } else {
        return true;
      }
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    function addUser() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );

      valid = valid && checkLength( name, "username", 3, 16 );
      valid = valid && checkLength( email, "email", 6, 80 );
      valid = valid && checkLength( password, "password", 5, 16 );

      valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
      valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
      valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

      if ( valid ) {

            $.ajax({
                method: "POST",
                url: "registerEngine.php",
                data: {"name": name, "email": email, "password": password},
             }).done(function( data ) {
                var result = $.parseJSON(data);

                var str = '';
                if(result == 1) {
                        str = 'User record saved successfully.';

                }else if( result == 2) {
                        str == 'All fields are required.';
                } else{
                        str = 'User data could not be saved. Please try again';
                }
          });


        dialog.dialog( "close" );

      }
      return valid;
    }

    dialog = $( "#dialog-form" ).dialog({
      autoOpen: true,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }
    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });

  } );
</script>

<title>Jadłospis - Rejestracja</title>
</head>
<body>


<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

</body>
</html>

registerEngine.php附加在下面：

<?php

include 'db_connection.php';
include 'functions.php';

error_log("-->registerEngin.php:"."\n", 3, "/var/www/html/jadlospis/errors.log");

if (isset($_POST['name'])){

        $T_nazwa = $_POST['name'];

        //$SQL = "DELETE FROM produkty WHERE nazwa='".$T_nazwa."' AND status='T'";
        //error_log("-->registerEngin.php:"."\n", 3, "/var/www/html/jadlospis/errors.log");
        if (mysqli_query($conn, $SQL)) {
                include 'usunProduktOK.php';
        } else {
                echo "Błąd usuniecia rekordów: " . mysqli_error($conn);
        }

        mysqli_close($conn);
}

?>

很抱歉遇到一个新手问题，但我对js / jquery的了解不多，也不知道如何克服这些问题。

在此先感谢您的帮助。

Answer 1

要获取输入字段的值，必须在元素选择器之后使用.val()。因此，在您的ajax调用中

data: {"name": name, "email": email, "password": password},

代替上面的方法尝试这个，

data: {"name": name.val(), "email": email.val(), "password": password.val()},

这样，就可以选择值并将其传递给ajax调用中的数据。我希望这对您有用。

Answer 2

Yunus Aslam提供了适用于我的解决方案。问题是代码中缺少.val（）部分。正确路线应该是：

data: {"name": name.val(), "email": email.val(), "password": password.val()},

这不能解决Chrome中出现错误消息的问题，但是在Firefox中看起来不错，因此我现在可以继续。谢谢Yunus的帮助。

jQuery ajax php / mysql-使用_POST方法的简单注册表格

2 个答案: