如何使用 ajax (jQuery) 处理表单提交

发布于 2024-12-19 23:03:30 字数 840 浏览 3 评论 0原文

我有一个 php 表单，

<form action="" method="POST">
    <input id="input1" name="key" type="text">
    <input id="input2" name="name" type="text">
    <button id="btn" type="button">Enter</button>
</form>

我想使用 ajax 提交表单，所以这就是我的做法

$('#btn').click(function(){
    var input1 = $('#input1').val();
    var input2 = $('#input2').val();
    var pass = 'val1='+input1+'&val2='+input2;
    $.ajax({
        type: "POST",
        url: "process.php",
        data: pass,
        success: function(data){
          //success;
        }
     });
});

我的问题是，当表单有多个输入项时，除了使用 < 检索它的值之外，我还必须为每个项提供一个 id code>$('#input1').val() 我认为这是一个麻烦的方法。

那么有没有比这更好的方法来处理ajax中的表单，可能不需要为每个输入项提供一个id，而是使用输入项名称检索处理文件中的值，就像php正常表单提交一样使用提交按钮？

原文

I've a php form

<form action="" method="POST">
    <input id="input1" name="key" type="text">
    <input id="input2" name="name" type="text">
    <button id="btn" type="button">Enter</button>
</form>

I want to submit the form using ajax so this is how I do it

$('#btn').click(function(){
    var input1 = $('#input1').val();
    var input2 = $('#input2').val();
    var pass = 'val1='+input1+'&val2='+input2;
    $.ajax({
        type: "POST",
        url: "process.php",
        data: pass,
        success: function(data){
          //success;
        }
     });
});

My problem is, when the form has several input items, I've to give an id for every item apart from retrieving it's value using $('#input1').val() and I think this is a cumbersome method.

So is there a way better than this to handle the form in ajax, probably which does not needing to give an id for every input item and instead retrieve the values at the processing file using the input item name just like a php normal form submission works using a submit button?

分享到QQ

分享到微博