javascript - 表单ajax将数据发布到php文件

Question

嗨，我正在尝试使用 ajax 制作表单。但我在将表单变量发送到 php 文件时遇到一些问题。我收到错误: undefined index :名称。 我检查了 chrome 开发工具，发现变量正在发送。但是当我在 php 文件中看到 echo json_encode 时，我得到了空数组。所以我不知道我在哪里犯了错误。

文件Main.js

var name = $('#user_name').val();
var lname = $('#user_lastname').val();

function formLogin(name, lname)
{
$.ajax({ url: 'database/register.php',
     data: {
         'name' : name,
         'lname' : lname
     },
     type: 'post',
     dataType:'json',
     success: function(data) {
                  alert(data);
              }
});
}

HTML 形式:

<form class="circleForm" id="registerForm">
     Imię: <input type="text" id="user_name"><br>
     Nazwisko: <input type="text" id="user_lastname">
    <br>
<input class="btnCircle" type="button" id="submit" value="Przejdź dalej" onclick="formLogin(name, lname)">                    
 </form>

PHP 代码:

$dane = $_POST; echo json_encode($dane);

Chrome 开发者:

我只是想知道如何在 php 文件 register.php 中回显此变量(名称，lname)

带序列化的版本:

function formLogin() {
        var dane = $('form').serialize();
    $.ajax({
        url: 'database/register.php',
        data: {'dane': dane},
        method: 'post',
        success: function(data) {
            console.log(data);
        }
    });
  
}

然后结果控制台:

<pre class='xdebug-var-dump' dir='ltr'>
<small>D:\xampp\htdocs\szkola\database\register.php:8:</small>
<b>array</b> <i>(size=1)</i>
  'dane' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>''</font> <i>(length=0)</i>
</pre>
jquery-3.2.1.min.js:4 XHR finished loading: POST "http://localhost/szkola/database/register.php".

但是当我去http://localhost/szkola/database/register.php时

我明白了:

D:\xampp\htdocs\szkola\database\register.php:8: 数组(大小=0) 空

Answer 1

您需要更改在 Javascript 中定义变量的方式，并在函数内部而不是外部声明它们:

function formLogin(){

    var name = $('#user_name').val();
    var lname = $('#user_lastname').val();

    $.ajax({ url: 'database/register.php',
         data: {
             'name' : name,
             'lname' : lname
         },
         type: 'post',
         dataType:'json',
         success: function(data) {
             alert(data);
         }
    });
}

并且您需要以相同的方式更新 HTML(formLogin() 而不是 formLogin(...,...)):

<form class="circleForm" id="registerForm">
     Imię: <input type="text" id="user_name"><br>
     Nazwisko: <input type="text" id="user_lastname">
    <br>
<input class="btnCircle" type="button" id="submit" value="Przejdź dalej" onclick="formLogin()">                    
 </form>