Javascript 每次表单输入字段更改时发送ajax请求

我需要创建一个表单，每当使用jquerychange事件更改表单元素时，它都会发送一个ajax请求。通过执行以下操作，我可以使表单输入值显示在跨距中：

<form id="TestForm" class="form-horizontal">
    <div class="form-group">
        <label for="namefirst" class="col-sm-2 control-label">First Name</label>
        <div class="col-sm-6">
            <input id="firstname" type="text" name="firstname" class="form-control" placeholder="Enter your first name" /><span id="spanfirstname"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="namelast" class="col-sm-2 control-label">Last Name</label>
        <div class="col-sm-6">
            <input id="lastname" type="text" name="lastname" class="form-control" placeholder="Enter your last name" /><span id="spanlastname"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-6">
            <div class="left-inner-addon"> <i class="glyphicon glyphicon-envelope"></i>
                <input id="email" type="text" name="email" class="form-control" placeholder="Enter your email" /><span id="spanemail"></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="col-sm-2 control-label">Phone</label>
        <div class="col-sm-6">
            <div class="left-inner-addon"> <i class="glyphicon glyphicon-phone-alt"></i>
                <input id="phone" type="text" name="phone" class="form-control" placeholder="Enter your phone number" /><span id="spanphone"></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-6">
            <input id="password" type="password" name="password" class="form-control" placeholder="Enter a password" /><span id="spanphone"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label"></label>
        <div class="col-sm-6">
            <button class="button green major beeboop" name="button" type="submit">This is a test</button>
        </div>
    </div>
</form>
<div id="result"></div>
<div class="row spacer"></div>
</div>
<!-- /container -->
<script src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#firstname').change(function() {
            $('#output_firstname').val($(this).val());
            $('#spanfirstname').html('<b> TestForm: firstname:' + $(this).val() + '</b>');
        });
        $('#lastname').change(function() {
            $('#output_lastname').val($(this).val());
            $('#spanlastname').html('<b>' + $(this).val() + '</b>');
        });
        $('#email').change(function() {
            $('#output_email').val($(this).val());
            $('#spanemail').html('<b>' + $(this).val() + '</b>');
        });
        $('#phone').change(function() {
            $('#output_phone').val($(this).val());
            $('#spanphone').html('<b>' + $(this).val() + '</b>');
        });
        $('#password').change(function() {
            $('#output_password').val($(this).val());
            $('#spanpassword').html('<b>' + $(this).val() + '</b>');
        });
    });
</script>

'); } }); });

---

我尝试了你的代码，但是没有调用任何ajax请求，我只是放了一个

控制台.log（'testing'）

它起作用了

我想你没有意识到（我的感觉）是。。更改不会在键入时调用..，而是在文本框失去焦点时调用

而且，最好使用

var getallyourvalshere=$（'#firstname'）.val（）；
$.post（'linktoyourscript.php'，{firstname:getAllYourValhere}，函数（数据）{
//做一些事情，console.log（数据）；
});

你为什么使用return-false
 您应该描述您的问题（错误、您得到的结果等），“不成功”意味着什么？为什么在更改中返回false？您检查了浏览器开发控制台中的日志了吗？有留言吗？更准确的信息将帮助您获得正确答案。请检查此项。。它起作用了！谢谢你和所有帮助过我的人。我需要将表单值添加到结构中，这是我的另一个问题。
<script>
    $(document).ready(function() {
        $('#firstname').change(function() {
            jQuery.post("ajax-process.cfm", {
                firstname: jQuery('#firstname').val()
            }, function(data) {

            });
            return false;
        });
    });
</script>

$("input[type='text']").change(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
var email = $("#email").val();
$.ajax({
url : "ajax-process.cfm",
type: "POST",
data: {
    firstname: firstname,
    lastname: lastname,
    email: email
},
success: function(data) {
$("#simple-msg").html('<pre><code>' + data +  '</code></pre>');
}
});
});