如何使用jquery将表单值发布为json格式

I have form element for some basic information, on submit how to post the form values as json format using jquery?

我有一些基本信息的表单元素,提交如何使用jquery将表单值发布为json格式?

and how do i test its posted successfully?

以及如何成功测试其发布?

HTML:

<table>
    <tr>
        <td>first name</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>last name</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>email</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>mobile</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>address</td>
        <td><textarea></textarea></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><input type="button" value="Submit" /></td>
    </tr>
</table>

3 个解决方案

#1

Use $.post() to perform this task :

使用$ .post()执行此任务:

$("myForm").submit(function(event) {
    /* preventing the submit */
    event.preventDefault();

    var myArray = [];

    /* 
        using myArray.push(value); 
        you can add all the value of yours textboxes to this array.
    */

    var myJsonArray = JSON.parse(myArray);

    $.post("path_to_my_php_file/myfile.php", { json_array : myJsonArray }, function(result) {
        /* this function can eventualy used to process the result of your php */
    });
});

If your form send data with GET method, use $.get() function.

如果表单使用GET方法发送数据,请使用$ .get()函数。

#2

You can send the form data in JSON format using ajax, please check below code:

您可以使用ajax以JSON格式发送表单数据,请检查以下代码:

var myformData = JSON.stringify($("#your-form-id").serializeArray());

$.ajax({
  type: "POST",
  url: "ServerURL",
  data: myformData ,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

#3

<table>
    <tr>
        <td>first name</td>
        <td><input type="text" name="firstname" id="fname"/></td>
    </tr>
    <tr>
        <td>last name</td>
        <td><input type="text" nmae="lastname" id="lname" /></td>
    </tr>
    <tr>
        <td>email</td>
        <td><input type="text" id="email"/></td>
    </tr>
    <tr>
        <td>mobile</td>
        <td><input type="text" id="mobile" /></td>
    </tr>
    <tr>
        <td>address</td>
        <td><textarea id="address"></textarea></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><input type="button" value="Submit" id="buttonClick" /></td>
    </tr>
</table>

In Jquery add this code:

在Jquery中添加以下代码:

 $("#buttonClick").click(function(){
        var fname,lname,email,mobile,address;
        fname=$("#fname").val();
        lname=$("#lname").val();
        email=$("#email").val();
        mobile=$("#mobile").val();
        address=$("#address").val();
        $.ajax({
            type:"post";
            url:"their write your url for php file ";
            data:"fname="+fname+"&lname="+lname+"&email="+email+"&mobile="+mobile+"&address="+address;
            success:function(res)
            {

            }

        });

    });
at url place your php file where you want to post these values you can get these values by using $_POST['fname'] etc.. in your php file

#1