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

一切都在这里工作，但只要您能看到，我都需要一种更短的方法... 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 variable - find corresponding column - and insert variable value

最佳答案

您可以通过序列化数据来实现。尝试这个。

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