实现代码

第一种

html代码：

       //html代码
        <div class="postbtn btn">POST请求</div>
        <div class="getbtn btn">GET请求</div>

js代码：

    <script type="text/javascript">

        //post请求
        document.querySelector(".postbtn").onclick= function(){
            var xmlhttp = new XMLHttpRequest();
            var obj = {
                name: 'zhansgan',
                age: 18
            };
            xmlhttp.open("POST", "http://192.168.1.200:8080/php/test.php", true);
            xmlhttp.setRequestHeader("token","header-token-value"); // 可以定义请求头带给后端
            xmlhttp.setRequestHeader("dingyi","header-dingyi-value");
            xmlhttp.send(JSON.stringify(obj));  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
            // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    console.log(xmlhttp.responseText);
                }
            }
        };

        //get请求
        document.querySelector(".getbtn").onclick= function(){
            var xmlhttp = new XMLHttpRequest();
            // get方法带参数是将参数写在url里面传过去给后端
            xmlhttp.open("GET", "http://192.168.1.200:8080/php/test.php?name='zhansgang'&age=12", true);
            xmlhttp.setRequestHeader("token","header-token-value");
            xmlhttp.setRequestHeader("dingyi","header-dingyi-value");
            xmlhttp.send();
            // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    console.log(xmlhttp.responseText);
                }
            }
        };
    </script>

另外一种

html代码：

<form class="contact_form" action="">
    <ul>
        <li>
             <h2>联系我们</h2> 
        </li>
        <li class="item">
            <label for="name">姓名:</label>
            <div>
                <input type="text"  name="cname" placeholder="2~10个汉字" required pattern="^[\u4e00-\u9fa5]{2,10}"/>
            </div>          

        </li>
        <li class="item">
            <label for="tel">电话:</label>
            <div>
                <input type="tel" name="tel" id="tel" placeholder="11位手机号" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}">
            </div>          
        </li>
        <li class="item">
            <label for="message">咨询:</label>
            <div>
            <textarea name="message" cols="40" rows="6" placeholder="咨询内容"></textarea>
            </div>
        </li>
        <li class="item">
            <label for="verify">验证码:</label>
               <div class="verify-box">
                <im g src="http://XXX.XXX.XXX/"  onclick="this.src='http://XXX.XXX.XXX/'" width="100" height="30">
                <input type="text" name="verify" placeholder="请输入图片中的验证码">
                </div>
        </li>
        <li>
            <button class="submit" type="button">提交</button>
        </li>
    </ul>

</form>

js部分：

<script>
    $(function(){
        $(".submit").click(function(){
            var cname=$('.cname').val();
            var tel=$('.tel').val();
            var message=$('.message').val();            
            var verify=$('.verify').val();  
            if(cname==""){
                alert('姓名未填写');
                return false;
            }

            if(!isName(cname).state){
                alert('姓名请输入2~10个汉字');
                return false;
            }

            if(tel==""){
                alert('手机号填写');
                return false;
            }
            if(!isPhoneNumber(tel).state){
                alert('请输入11位手机号');
                return false;
            }
            if(verify==""){
                alert('请输入验证码');
                return false;

            }
        $.ajax({  
            url: "http://XXX.XXX.XXX/", 
            data: {'cname':cname,'tel':tel,'message':message,'url':window.location.href,'verify':verify},
            type: 'POST', 
            dataType:'json', 
            xhrFields: {  
                withCredentials: true // 这里设置了withCredentials  
            },  
            success: function(data) {
                if (data.code==1) {
                    $(".cname").val("");

                    $(".tel").val("");

                    $(".message").val("");
                    $(".verify").val("");
                    alert(data.msg);
                }else if (data.code==0){
                        alert(data.msg);        
                }
            },  
            error: function(err) {  

            }  
        })  

    });

    })

</script>