最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 基于HTML实现表单提交后不刷新页面_html教程


    使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法,主要是基于iframe框架实现的。现在小编整理特此分享脚本之家平台供大家参考

    使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法,主要是基于iframe框架实现的。现在整理出来分享给大家。
    第一种:
    (html页面)

    HTML Code复制内容到剪贴板

    <!DOCTYPE HTML>    
    <html lang="en-US">    
    <head>    
    <meta charset="utf-8">    
    <title>无刷新提交表单</title>    
    <style type="text/css">    
    ul{ list-style-type:none;}    
    </style>    
    </head>    
    <body>    
    <iframe name="formsubmit" style="display:none;">    
    </iframe>    
    <!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->    
    <form action="form.php" method="POST" name="formphp" target="formsubmit">    
    <ul>    
    <li>    
    <label for="uname">用户名:</label>    
    <input type="text" name="uname" id="uname" />    
    </li>    
    <li>    
    <label for="pwd">密 码:</label>    
    <input type="password" name="pwd" id="pwd" />    
    </li>    
    <li>    
    <input type="submit" value="登录" />    
    </li>    
    </ul>    
    </form>    
    </body>    
    </html>    
    
    (PHP页面:form.php)    
    
    <?php    
    //非空验证 
    if(empty($_POST['uname']) || empty($_POST['pwd']))    
    {    
    echo '<script type="text/javascript">alert("用户名或密码为空!");</script>';    
    exit;    
    }    
    //验证密码 
    if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')    
    {    
    echo '<script type="text/javascript">alert("用户名或密码不正确!");</script>';    
    exit;    
    } else {    
    echo '<script type="text/javascript">alert("登录成功!");</script>';    
    exit;    
    }

    第二种:

    (html页面)

    HTML Code复制内容到剪贴板

    <!DOCTYPE HTML>    
    <html lang="en-US">    
    <head>    
    <meta charset="utf-8">    
    <title>iframe提交表单</title>    
    </head>    
    <body>    
    <iframe name="myiframe" style="display:none;" onload="iframeLoad(this);"></iframe>    
    <form action="form.php" target="myiframe" method="POST">    
    用户名:<input type="text" name="username" /><br/>    
    密 码:<input type="password" name="userpwd" /><br/>    
    <input type="submit" value="登录" />    
    </form>    
    <script type="text/javascript">    
    function iframeLoad(iframe){    
    var doc = iframe.contentWindow.document;    
    var html = doc.body.innerHTML;    
    if(html != ''){    
    //将获取到的json数据转为json对象 
    var obj = eval("("+html+")");    
    //判断返回的状态 
    if(obj.status < 1){    
    alert(obj.msg);    
    }else{    
    alert(obj.msg);    
    window.location.href="http://www.baidu.com";    
    }    
    }    
    }    
    </script>    
    </body>    
    </html>

    (PHP页面:form.php)

    XML/HTML Code复制内容到剪贴板

    <?php
    //设置时区    
    date_default_timezone_set('PRC');    
    /*    
    返回的提交消息    
    status:状态    
    msg:提示信息    
    */    
    $msg = array('status'=>0,'msg'=>'');    
    //获取提交过来的数据    
    $name = $_POST['username'];    
    $pwd = $_POST['userpwd'];    
    //模拟登录验证    
    $user = array();    
    $user['name'] = 'jack';    
    $user['pwd'] = 'jack2014';    
    if($name != $user['name']){    
    $msg['msg'] = '该用户未注册!';    
    $str = json_encode($msg);    
    echo $str;    
    exit;    
    }else if($pwd != $user['pwd']){    
    $msg['msg'] = '输入的密码错误!';    
    $str = json_encode($msg);    
    echo $str;    
    exit;    
    }    
    $msg['msg'] = '登录成功!';    
    $msg['status'] = 1;    
    $str = json_encode($msg);    
    echo $str;

    以上内容是小编给大家介绍的基于HTML实现表单提交后无刷新页面的相关内容,希望对大家有所帮助!

    相关推荐:

    多种实例解析HTML表单form的使用方

    以上就是基于HTML实现表单提交后不刷新页面的详细内容,

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 967会员总数(位)
    • 111831资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 202稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐