ajax的提交数据到另一PHP问题

我的HTML代码是这样的


<form name="biaodan" method="post" action="">
姓名：<input type="text" id="xingming"name="xingming" /><br />
品牌：<input type="text" name="pinpai" /><br />
订单：<input type="text" name="dingdan" /><br />
邮箱：<input type="text" name="youxiang" /><br />
<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>

我需要把表单内的数据发送到ajax_so.php 请问怎么写，只需要ajax代码，php接受我知道是这样的


<?php
        $xingming= $_POST['xingming'];
        $pinpai= $_POST['pinpai'];
        $dingdan= $_POST['dingdan'];
        $youxiang= $_POST['youxiang'];
?>

我知道大概的写法，但是提交不上去


var userName = f.xingming.value;
var userAge = f.pinpai.value;
var userSex = f.dingdan.value;
var userSex1 = f.youxiang.value;
//接收表单的URL地址
var url = "./ajax_so.php";
//需要POST的值，把每个变量都通过&来联接
var postStr  = "xingming="+ userName +"&pinpai="+ userAge +"&dingdan="+ userSex +"&youxiang="+ userSex1;

1.双重请求问题：

对于js提交php请求，如果已经决定使用ajax，那么在form上就不用再填写表单的提交方式post，和提交目的地址 action。
否则，当你点击按钮的时候，就会发送两个请求出去。第一个是ajax发送的，第二个是form表单发出去的，这一个可以在开发者工具中的 network中看到。

2.php接收参数没有写错

3.ajax传递参数出错

如果没有明确指定ajax的头部信息，那么ajax传递上服务器的参数应该是json结构，或者formData。而并非直接拼接字符串，如果是直接字符串拼接到地址之后，请使用get请求的方式

4.完整代码如下：

html+js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>

<form name="biaodan">
    姓名：<input type="text" id="xingming" name="xingming"/><br/>
    品牌：<input type="text" name="pinpai"/><br/>
    订单：<input type="text" name="dingdan"/><br/>
    邮箱：<input type="text" name="youxiang"/><br/>
    <input type="button" value="提交表单" onClick="saveUserInfo()">
</form>
<script>
    function saveUserInfo() {
        var data = {};
        $('[name="biaodan"]>input').not('[type="button"]').each(function (i, v) {
            data[$(v).attr('name')] = $(v).val();
        });
        var url = './ajax_so.php';
        $.ajax({
            url: url,
            type: "post",
            data: data,
            dataType: "json",
            success: function (result) {
                console.log(result);
            }
        });
    }
</script>
</body>
</html>

php：

<?php
$xingming = $_POST['xingming'];
$pinpai = $_POST['pinpai'];
$dingdan = $_POST['dingdan'];
$youxiang = $_POST['youxiang'];
echo json_encode($_POST, true);

js代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function saveUserInfo() {
        
    var f = document.forms.biaodan;
    var userName = f.xingming.value;
    var userAge = f.pinpai.value;
    var userSex = f.dingdan.value;
    var userSex1 = f.youxiang.value;
    //接收表单的URL地址
    var url = "./ajax_so.php";
    //需要POST的值，把每个变量都通过&来联接
    var postStr  = "xingming="+ userName +"&pinpai="+ userAge +"&dingdan="+ userSex +"&youxiang="+ userSex1;
    console.log(postStr);
    $.ajax({
        url: url,
        type: "POST",
        data: postStr,
        dataType: "text",
        success: function (data) {
            console.log("提交成功，php返回的内容：");
            console.log(data);
        }
    });
}


</script>

</head>
<body>
 
<form name="biaodan" method="post" action="">
姓名：<input type="text" id="xingming"name="xingming" /><br />
品牌：<input type="text" name="pinpai" /><br />
订单：<input type="text" name="dingdan" /><br />
邮箱：<input type="text" name="youxiang" /><br />
<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>

</body>
</html>

先引入jquery库，调用jquery库的$.ajax()就好。

不过你这样字符串拼接有漏洞，如果输入的内容中有&和=就会出错，需要用 encodeURIComponent()对输入的内容进行下编码。

var postStr = "xingming="+ encodeURIComponent(userName) +"&pinpai="+ encodeURIComponent(userAge) +"&dingdan="+ encodeURIComponent(userSex) +"&youxiang="+ encodeURIComponent(userSex1);
或者写成json对象，交由$.ajax()进行处理
var postStr = { "xingming": userName, "pinpai": userAge, "dingdan": userSex, "youxiang": userSex1 };