Ajax實現無重新整理表單提交

阿新 • • 發佈：2019-01-27

一般方式實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title></title>
        <script language = "javascript">
            function f1(){
                //建立xmlHttp物件
                var xmlHttp;
                if(window.ActiveXObject){
                    xmlHttp = new 
 ActiveXObject("Microsoft.XMLHTTP");
                }
                else if(window.XMLHttpRequest){
                    xmlHttp = new XMLHttpRequest();
                }

                //獲取表單值
                var username = document.form1.username.value;
                var password = document.form1.password.value;
                var 
 email = document.form1.email.value;
                var datastr = "username=" + username + "&password=" + password + "&email=" + email;
                var url = "./004.php";

                xmlHttp.onreadystatechange = function(){
                    if(xmlHttp.readyState == 4){
                        alert(xmlHttp.responseText);
                    }
                }

                //提交資料 

                xmlHttp.open("POST",url,false);
                xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlHttp.send(datastr);
                document.getElementById("p1").innerHTML = "表單已提交";
            }
        </script>
    </head>
    <body>
        <h2>Ajax無重新整理提交表單</h2>
        <p id="p1"></p>
        <form name="form1">
            <p>使用者名稱：<input type = "text" name = "username" /></p>
            <p>密碼：<input type = "password" name = "password" /></p>
            <p>郵箱：<input type = "text" name = "email" /></p>
            <p><input type = "button" value = "提交" name = "Submit" onclick = "f1()"/></p>
        </form>
    </body>
</html>

服務端頁面 004.php

//004.php
<?php
//收集form表單傳遞過來的post資訊
print_r($_POST);

執行效果
這裡寫圖片描述

　　2.利用FormData表單資料物件，可以實現快速收集表單資訊。FormData是html5的新技術，在主流瀏覽器中都可以正常使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title></title>
        <script language = "javascript">
            function f1(){
                //建立xmlHttp物件
                var xmlHttp;
                if(window.ActiveXObject){
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else if(window.XMLHttpRequest){
                    xmlHttp = new XMLHttpRequest();
                }

                //獲取表單值
                //利用FormData表單資料物件，快速收集表單資訊
                var form = document.form1;
                var fd = new FormData(form);//收集fm的表單資訊

                //提交資料
                xmlHttp.open("POST","./004.php",false);
                xmlHttp.send(fd);
            }
        </script>
    </head>
    <body>
        <h2>Ajax無重新整理提交表單</h2>
        <form name="form1">
            <p>使用者名稱：<input type = "text" name = "username" /></p>
            <p>密碼：<input type = "password" name = "password" /></p>
            <p>郵箱：<input type = "text" name = "email" /></p>
            <p><input type = "button" value = "提交" name = "Submit" onclick = "f1()"/></p>
        </form>
    </body>
</html>

注意：
（1）FormData要求每個表單域必須有name屬性；
（2）使用FormData的同時不能設定setRequestHeader()方法；
（3）普通表單域的特殊符號無需編碼

Ajax實現無重新整理表單提交

一般方式實現 <!DOCTYPE html> <html> <head> <meta charset = "utf-8">

無重新整理表單資訊提交，使用HTML5新技術FormData

利用新技術FormData表單資料物件，可以實現快速收集表單資訊，FormData是html5的新技術，在主流瀏覽器都可以使用。 1.傳統的不適用FormData Ajax無重新整理表單提交方式（程式

jqPaginator分頁（ajax用法和form表單提交用法）

用法 () var meta lang 點擊 parse name back 一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

網站開發之MyEclipse簡單實現JSP網頁表單提交及傳遞值

本文主要是作者《中小型網站開發與設計》課程的內容，非常基礎的文章，主要是指導學生學會用MyEclipse實現JSP網頁表單提交及傳遞引數。希望大家喜歡這篇文章，基礎文章，不喜勿噴~ 一. MyEclipse實現網頁動態表單提交 1.新建Web Service工程，名稱為te

DedeCMS實現自定義表單提交後傳送指定郵箱的方法

連結: https://pan.baidu.com/s/1t7F8eah3Bw-97jsKNqiQQg 提取碼: gs6j 一、登陸QQ郵箱——設定——賬戶，找到POP3/IMAP/SMTP，開啟，現在的郵箱開啟POP3/SMTP都要授權碼，記下你的授權碼，等一下是作為密碼使用的

HttpClient 4 3 6 使用MultipartEntityBuilder實現類似form表單提交方式的檔案上傳

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

spring mvc + ajax實現無重新整理下載檔案

JQuery的ajax函式的返回型別只有xml、text、json、html等型別，沒有“流”型別，所以我們要實現ajax下載，不能夠使用相應的ajax函式進行檔案下載。但可以用js生成一個form，用這個form提交引數，並返回“流”型別的資料。在實現過程中，

PHP＋AJAX實現無重新整理註冊（帶使用者名稱實時檢測）程式碼

很多時候，我們在網上註冊個人資訊，在提交完頁面後，總得等待頁面重新整理來告訴我們註冊是否成功，遇到網路差的時候，如果註冊了一大串的東西，在經過漫長的等待頁面重新整理後，得到的確是“您的使用者名稱已被使用”或XXXXXXX不合法，我想大家的心情一定特別不爽，今天就介紹個AJA

PHP + JavaScript + Ajax 實現無重新整理頁面載入效果

今天這個實驗的思路就是實現一個無重新整理的頁面載入效果。具體的思路是使用PHP開發後臺，為前臺準備資料，然後使用Ajax技術作為資料的搬運工，將資料從伺服器端拉取到前端，最後使用JavaScript技術將獲取到的資料加工，並顯示在頁面上。資料來源工

javascript專案實戰---ajax實現無重新整理分頁

<?php class Pagination { private $total; //資料表中總記錄數 private $listRows; //每頁顯示行數 private $limit; //mysql 資料庫的limit private $uri; //分頁

Echats結合Ajax實現無重新整理實時投票

第一步：前臺頁面(使用Ajax獲取資料初始化顯示投票現狀並實時更新顯示)：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

如何使用ajax實現無重新整理上傳

詳細程式碼如下 9.upload.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Cont

thinkphp下ajax實現無重新整理刪除

1.foreach遍歷出控制器中分類表中的資料，此處需要注意的是連結跳轉href=”javascript:void(0)”,然後再將js中的函式繫結到點選事件 2.ajax不重新整理刪除：thin

Gridview各種功能+AspNetPager+Ajax實現無重新整理儲存過程分頁

儲存過程： GetProductsCount1： CREATE PROCEDURE GetProductsCount1 AS

用AJAX實現無重新整理資料讀取與顯示

*******資料顯示頁ajax.asp: <script type="text/javascript"><!--/* * Author: Wintalen * Email: winalen (at) 163.com * OICQ: 83151085 * C

asp.net mvc基於jQuery+Ajax實現無重新整理分頁

解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。後端控制器處理完後利用PartialView方法把資料返回到分部檢視中，利用

History配合Ajax實現無重新整理頁面跳轉

一些網站頭尾內容都是一樣的，重新整理總顯得浪費。從體驗上講，點選導航，右側Ajax區域性重新整理是更優的策略。 Ajax區域性重新整理小菜，稍有經驗都能輕鬆應對。現在如果提出如下需求：每次ajax重新整理就如果頁面重新整理一樣，可以後退檢視之前內容，怎麼破？

SSH三大框架的整合+利用Ajax實現無重新整理分頁

以下是我利用Struts2.3.24、Spring4.0、Hibernate4.2 結合Mysql資料庫進行的ssh整合，實現分頁需要json.js 首先ssh的整合需要匯入所有的jar包在web.xml <?xml version="1.0" e

JS工具函式封裝：使用隱藏iframe實現跨域表單提交

程式碼如下： /* * 使用隱藏的iframe傳送表單提交 * Author: 鄧智容 * Created: 2017-06-19, Last-Modified: 2017-06-19 * 依賴 jQuery或者 Zepto * * * o

jsp+ajax實現無重新整理滑鼠離開文字框即驗證使用者名稱

歡迎大牛提意見 jsp+ajax實現無重新整理,滑鼠離開文字框即驗證使用者名稱，操作如下：新建一個輸入頁面，起名為input.jsp, [java] <%@ page contentType="text/html; charset=utf-8"%>

Ajax實現無重新整理表單提交

相關推薦