教程中心

当前位置: 主页/电脑学堂/电脑问题/解决办法/网页中怎么实现表单提交后不刷新页面正文

网页中怎么实现表单提交后不刷新页面

2017-03-29 07:52来源:www.kmdn.net整理: 昆明电脑维修我要评论

用手机看

扫描二维码查看 并分享给您的朋友

在实际的开发中很多时候我们提交表单之后是不希望网页刷新的或者我们只需要网页内部部分刷新,假如你要从数据库中取出的数据直接显示在本网页中,但是从提交post数据到本页面显示数据都不让整个网页刷新,怎么实现呢?

    提交post数据而不刷新页面的方法应该有很多,小编在这里只介绍一种小编用着比较顺手的办法。小编利用的事jquery做出来的想要的效果。

  首先介绍一下我要实现的功能,我们根据下图介绍:(填写服务器端文件的名字,点击【打开此文件并显示在本页面】按钮内容显示区就会显示从服务器端取回的数据,并且页面不刷新,网址也不变,记着关注我给我要代码呀)

  

  小编使用的所有编码都是utf-8,因为jquery中发送post包默认编码是utf-8编码,所以都是用utf-8编码可以避免网页显示乱码的问题。在文件名字那就是你要打开的文本名字,如果你要自己试验可以随意修改txt文档的名称。

  下面是代码:

  小编一共使用了5个文件(index.php,accept.php,jq.js,test1.txt,test2.txt)

  一、Index.php

  用于显示页面效果和提交post的前端页面。代码如下:

  <html>

  <head>

  <meta charset="utf-8" />

  < src="jq.js" type="text/java"> </>

  <>

  //创建js函数,来处理我们要实现的效果

  function show(){

  var txt_name = $('#txt_name').val();//获取文件名称输入框的内容

  if(txt_name == false){//判断如果没有输入内容,就提示错误

  alert('错误:你没有填写文件名字,不能为您查找此文件!');

  }else{

  $.post('accept.php', {txt_name: txt_name}, function (data) {

  $('#show').html(data);

  }, "html"); //向accept发送数据包,核心代码,下面我们详细介绍这个函数

  }

  }

  </>

  <style>

  body{

  background-color: #C6DBDE;

  }

  #show{

  border:1px solid #4A791D;

  height: auto;

  width: 600px;

  background-color: #4A791D;

  color: #ffffff;

  margin: 0 auto;

  }

  #show_title{

  margin: 0 auto;

  width: 600px;

  }

  </style>

  </head>

  <body>

  <br /><br />

  <div id="show_title">

  <span>文件名字:</span><input id="txt_name" type="text" value="test1"/><span>.txt</span>

  <button onclick="show()">打开此文件并显示在本页面</button></div><br /><br />

  <div id="show">

  内容显示区域

  </div>

  </body>

  </html>

  其中用到了$.post,$.post(url,parameters,callback)参数说明:

  参数

  1、url(字符串)服务器端资源地址。

  2、parameter(对象)需要传递到服务器端的参数。 参数形式为“键/值”。

  3、callback(函数)在请求完成时被调用。该函数参数依次为响应体和状态。处理返回的值也在这一步。

  看不懂的话,就去看我写的实例,自己手动修改参数看之后的效果。

  2、accept.php代码如下:

  <?php

  if($_POST['txt_name']){

  $txt_name = $_POST['txt_name'].'.txt';

  $txt_con = file_get_contents($txt_name);

  echo $txt_con;

  }else{

  echo '错误:对不起,您提交的文件名字系统无法识别!';

  }

  ?>

  这个就是处理发送到服务器端的数据,然后打开相应文件,返回给客户端。

  3、剩下的三个文件jq.js是从官网下载就行,其他两个文件没有代码就是测试显示的内容。

  来看一下显示效果的截图吧。

  

  其他的测试文本请自行修改测试,我写的源代码也可以自己修改,然后关掉教程,全手动敲一遍这些代码,看能否实现相同效果,因为这种效果也是实现网页进度条的效果。以后能用到的地方还是很多的。

如果您觉得对您有用,可以分享给您的朋友:

用户评论