網頁中怎麽實現表單提交後不刷新頁麵_AG集团科技

教程中心

當前位置: 主頁/電腦學堂/電腦問題/解決辦法/網頁中怎麽實現表單提交後不刷新頁麵正文

網頁中怎麽實現表單提交後不刷新頁麵

2017-03-29 07:52來源:www.hbcmgw.com整理: 昆明電腦維修我要評論

用手機看

掃描二維碼查看 並分享給您的朋友

在實際的開發中很多時候我們提交表單之後是不希望網頁刷新的或者我們隻需要網頁內部部分刷新,假如你要從數據庫中取出的數據直接顯示在本網頁中,但是從提交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是從官網下載就行,其他兩個文件沒有代碼就是測試顯示的內容。

  來看一下顯示效果的截圖吧。

  

  其他的測試文本請自行修改測試,我寫的源代碼也可以自己修改,然後關掉教程,全手動敲一遍這些代碼,看能否實現相同效果,因為這種效果也是實現網頁進度條的效果。以後能用到的地方還是很多的。

如果您覺得對您有用,可以分享給您的朋友:

用戶評論