javascript - ajax 大表单提交的更短方法

Question

这里一切正常，但如果可能的话，我需要一种更短的方法，无论您在哪里看到... 20 项:

<input type='text' id='inputname' maxlength='50' placeholder='Name' required>
<input type='text' id='inputsname' maxlength='50' placeholder='Surname'>
... and so on... 20 fields.
<button id='btnregister'>Register</button> 

javascript

$('#btnregister').click(function(){
var name = $('#inputname').val();
var sname = $('#inputsname').val();
... 20 items
$.ajax({
    url: 'regpro.php',
    type: 'post',
    data: {
        'name': name,
        'sname': sname,
        ... 20 items
        },
    success: function(data) {
        if (data == 'exists') {
            alert ('name allready exists');
        }
        else if (data =='empty'){
            alert ('something is missing');
        }
        else{
            location.href = 'login.php?ref="reg"';
        }
    }
});
});  

regpro.php

$_POST = array_map( 'stripslashes', $_POST );
extract($_POST);
try {
$stmt = $db->prepare('INSERT INTO members (name, sname... 20 items) VALUES (:name, :sname... 20 items)');
$stmt->execute(array(
    ":name" => $name,
    ":sname" => $sname,
    ... 20 items
));
}
catch(PDOException $e) {
echo $e->getMessage();
}

我知道经典的表单提交而不是ajax过程在javascript方面会是更短的方式，但我想在处理后保持输入填充，以防出现问题，所以用户不能再次填写它们。

在 php 方面，也许有一种方法可以这样说:
foreach post 变量 - 查找相应列 - 并插入变量值

Answer 1

您可以通过序列化数据来做到这一点。试试这个。

$('#btnregister').click(function(){
 $.ajax({
  url: 'regpro.php',
  type: 'post',
  data: $('#your-form-id').serialize(),
  success: function(data) {
    ...
  }
 });
});