Question

请我是jQuery的新手，所以我只是复制了代码：

<div id="container">
    <input type="text" id="name" placeholder="Type here and press Enter">
</div>

<div id="result"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#name').focus();
        $('#name').keypress(function(event) {
            var key = (event.keyCode ? event.keyCode : event.which);
            if (key == 13) {
                var info = $('#name').val();
                $.ajax({
                    method: "POST",
                    url: "action.php",
                    data: {name: info},
                    success: function(status) {
                        $('#result').append(status);
                        $('#name').val('');
                    }
                });
            };
        });
    });
</script>

这是php代码：

    <?php 
if (isset($_POST['name'])) {
    echo '<h1>'.$_POST['name'];
}
?>

它的工作完美但现在我希望有这样的多个输入字段：

<input type="text" id="name" >
<input type="text" id="job">

但我不知道如何为2个输入字段运行jQuery代码，以便它可以将它们传输到php页面。我需要帮助

Answer 1

您可以使用像这样的ajax请求的data参数传递多个值。

$.ajax({
    method: "POST",
    url: "action.php",
    data: {
        name: $('#name').val(),
        job: $('#job').val()
    },
    success: function(status) {
        $('#result').append(status);

        $('#name, #job').val(''); // Reset value of both fields
    }
});

Answer 2

您需要在html和JS中添加一些代码来更改代码。将您的输入换入form标记。并在提交时添加preventDefault。使用jQuery .serialize()方法和event.preventDefault()

event.preventDefault()：如果调用此方法，则为默认值不会触发事件的动作。（它会阻止页面重新加载/重定向到任何页面。
.serialize()：将一组表单元素编码为
的字符串提交。

序列化字符串输出将与key=value对&分开。：

name=john&job=developer.....

HTML

<form id="myform">
  <input type="text" id="name" placeholder="Type here and press submit">
  <input type="text" id="job" placeholder="Type here and press submit">
  <input type="submit" name="submit" value="Submit Form">
</form>

JS

$(document).ready(function() {
        $('#myform').submit(function(event) {
            event.preventDefault();
                var serialized = $('#myform').serialize();
                $.ajax({
                    method: "POST",
                    url: "action.php",
                    data: serialized,
                    success: function(status) {
                        $('#result').append(status);
                        $('#myform').reset();
                    }
                });
        });
    });

将多个数据发送到PHP页面而不重新加载页面

2 个答案: