表单异步提交数据

<form name="form1">

    <input name="dsfurl" type="hidden" id="dsfurl">
        <table border="0" class="yy">

        <tbody>
            <tr>
                <td align="center"><input name="name" id="name" type="text" class="shur"  value=""  placeholder="请输入您的姓名" ></td>
            </tr>

            <tr>
                <td align="center"><input id="haoma" name="tel" type="text" class="shur" value="" placeholder="请输入联系电话"  ></td>

            </tr>

            <tr>
                <td align="center" class="field1" style="height:30px">
                    <select type="text" name="yy"  id="dateinfo"  class="shur" style="width: 280px;background: #fff;">
                        <option value=‘‘>请选择您的预约日期</option>
                        <script language="javascript">
                            //构造当前日期对象
                            var myDate = new Date();
                            //获取年份
                            var year = myDate.getFullYear();
                            //获取当前月份
                            var mouth = myDate.getMonth() + 1;
                            //定义当月的天数;
                            var days;
                            //当月份为二月时,根据闰年还是非闰年判断天数
                            if (mouth == 2) {
                               days = year % 4 == 0 ? 29 : 28;
                            }else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 ||mouth == 12) {
                            //月份为:1,3,5,7,8,10,12 时,为大月.则天数为31;
                            days = 31;
                            }else {
                            //其他月份,天数为:30.
                            days = 30;
                            }
                            var syu=days-myDate.getDate();

                            if(syu < 7){

                                for(var i = 0; i <=7; i++) {
                                    time = (myDate.getMonth() + 1) + "月" + myDate.getDate() + "日";
                                    document.write("<option value=‘" + time + "‘>" + time + "</option>");
                                    myDate.setDate(myDate.getDate() + 1);
                                }

                            }else{
                                for(var i = 0; i <= syu; i++) {
                                    time = (myDate.getMonth() + 1) + "月" + myDate.getDate() + "日";
                                    document.write("<option value=‘" + time + "‘>" + time + "</option>");
                                    myDate.setDate(myDate.getDate() + 1);
                                }
                            }

                            </script>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="center"><textarea  name="bq" id="bq" cols="" rows="" class="shur2"  placeholder="请简要描述一下" ></textarea></td>
            </tr>
            <tr>

                <td align="center"  ><input type="button" class="anniu" id="submit" value="点击提交预约信息" onclick="return checkgh(document.form1)";></td>
            </tr>
            <tr>

                <td align="center"> <p class="g-foot">温馨提示:工作人员将在一个工作日内与您联系!</p></td>

            </tr>

        </tbody>
    </table>
</form>

<script language="javascript">
document.getElementById(‘dsfurl‘).value=document.referrer;
</script>

js代码:

function checkgh(fm) {
    if (fm.name.value == ‘‘) {
        alert(‘请输入您的名字‘);
        window.setTimeout(function () {
            fm.name.focus();
        }, 0);
        return false;
    }
    if (fm.tel.value == ‘‘) {
        alert(‘请输入您的联系方式‘);
        window.setTimeout(function () {
            fm.tel.focus();
        }, 0);
        return false;
    }
    if (!isMobile(fm.tel.value)) {
        alert("请填入正确的联系号码");
        window.setTimeout(function () {
            fm.tel.focus();
        }, 0);
        return false;
    }
    submitForm(fm);
    return true;
}

var trueStr = ‘您已成功预约!‘;

var falseStr = "很抱歉,预约失败!";

function submitForm(form) {

    if (getCookie("submitcache") != null) {
        if (new Date().getTime() - getCookie("submitcache") < 1000 * 30) {
            alert("30秒内不能重复提交,请稍后再尝试提交!");
            return false;

        }
    }
    var xmlHttp = createXmlHttp();
    if (!xmlHttp) {
        alert(falseStr);
        return 0;
    }
    var url = ‘https//www.5z.com/gh22.php‘;
    var postData = "";
    var subtnchar = form.submit.value;
    for (var i = 0; i < form.length; i++) {
        postData += form.elements[i].name + "=" + form.elements[i].value + "&";
    }
    xmlHttp.open("POST", url, true);
      xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;&charset=utf-8");

    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            if (xmlHttp.responseText.indexOf("ok") != -1) {
                try {
                    document.cookie = "submitcache=" + new Date().getTime();
                } catch (e) {}
                alert(trueStr);
                form.reset();
            } else if (xmlHttp.responseText.indexOf("err") != -1) {
                alert(falseStr);
                form.reset();
            } else {
                var jsonString = xmlHttp.responseText;
                alert(jsonString.substring(11, jsonString.length - 2));
            }
            form.submit.value = subtnchar;
            form.submit.disabled = false;
        }
    }
    form.submit.value = "数据提交中……";
    form.submit.disabled = true;
    xmlHttp.send(encodeURI(postData));

    return true;
}

function createXmlHttp() {
    var xmlHttp = null;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

function isMobile(s) {
    if (!(/^((1[34578]\d{9})|(0\d{10,11}))$/.test(s))) {
        return false;
    }
    return true;
}

function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

php文件执行的结果

1,执行成功 返回status:ok;

2,执行不成功,返回status:err;

时间: 2024-10-12 12:46:50

表单异步提交数据的相关文章

使用jQuery.form插件,实现完美的表单异步提交

示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form.js 官网. 通过该插件,我们可以非常简单的实现表单的异步提交,并实现文件上传.进度条显示等等. 现在我们从一个ASP.NET同步表单提交开始,然后再将其转化为异步的表单提交.我写了3种表单提交示例,并简单分析了各种方式的利弊. 当然主题还是使用jQuery表单插件轻松实现表单异步提交以及分析下该插件的源码. ASP.NET服务

使用jQuery,实现完美的表单异步提交

jQuery异步提交表单 1 <form id="form1" method="post"> 2 <table border="1"> 3 <tr> 4 <td>用户名:</td> 5 <td> 6 <input type="text" name="loginName" /></td> 7 </tr>

jQuery的表单异步提交(MVC版)

之前在公司做了一个关于热门专业的项目,用到了jQuery的表单异步提交,由于项目是MVC5框架的,所以我的代码也只是针对MVC而言的哦! 代码如下: $.ajax({ type: "POST", url: "/HotMajor/AddOK", dataType:"text", data:$('#hotmajor').serialize(), success: function (dat) { if (dat == "true"

jQuery——表单异步提交

如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$.ajax()执行异步请求资源. 网页代码: <form mothod="POST" id="search_form"> <div class="cf"> <label class="search-bar&qu

HTML5的 input:file上传 样式美化及表单异步提交

样式美化请看博客:css input[type=file] 样式美化,input上传按钮美化 input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. DOM结构: <a href="javascript:;" class="a-upload"> <input type="file" name="" id="">

表单-前端提交数据

前端提交表单: 1.如果想用表单提交数据 需要给对应的表单元素加上 name 属性 2.默认的提交方式是get 3.get post 提交有什么区别呢? get提交的url地址栏显示提交的数据 而post隐藏 包含在**请求的头部**  安全一些 get提交的数据量小 post提交可以提交的数据量大 4.method设置请求方式  get  post <form action="form.php" method="post"> 用户名:<input

form表单只提交数据而不进行页面跳转的解决方案

转载 将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢?利用jquery的ajaxSubmit函数以及form的onsubmit函数完成 一般的form提交操作写法为: <form action="saveReport.htm" method="post"> -- <input type="submit" value="保存报告"/> <

表单 - Form - EasyUI提供的表单异步提交

方案一 被提交的表单 <form id="loginForm" method="post"> <table align="center"> <tr> <th align="right">用户名</th> <td> <input type="text" name="username"/> </td&g

axios用表单形式提交数据

创建一个空的FormData对象 var formData = new ForData(); 使用FormData.append来添加键/值对到表单里面; FormData  api地址:  https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData