使用ajax傳送post請求（切換圖片）

阿新 • • 發佈：2019-02-06

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切換圖片</title>
    <style type="text/css">
        body{
            text-align: center;
        }
        #img{
            width: 220px;
            height: 220px;
            border 
: 1px solid #000;
            margin: 0 auto;

        }
        #text{
            width: 220px;
            height: 100px;
            border: 1px solid #000;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <h1>切換圖片</h1>
    <div id="img">

    </div 
>
    <div id="text"></div>

    <input type="button" class='starBtn' value='海賊王'  data-star='onePiece'>
    <input type="button" class='starBtn' value='李彥巨集' data-star='lyh'>
    <input type="button" class='starBtn' value='馬雲' data-star='my'>


    <script type="text/javascript" 
>

            var btns = document.querySelectorAll(".starBtn");

            // 繫結事件
            for(var i = 0; i <btns.length; i++){
                btns[i].onclick = function(){

                    var ajaxObj = new XMLHttpRequest();

                    ajaxObj.open("post","04changeimg.php");

                    ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");

                    ajaxObj.send('starName='+this.dataset['star']);

                    ajaxObj.onreadystatechange = function(){
                        if(ajaxObj.readyState==4&&ajaxObj.status==200){
                            //
                            console.log(ajaxObj.responseText);
                            //擷取字串
                            var starArr = ajaxObj.responseText.split("|");

                            //console.log(starArr);

                            document.querySelector("#img").style.background = 'url('+starArr[0]+') no-repeat center/cover ';

                            document.querySelector("#text").innerHTML = starArr[1];
                        }

                    };
                };
            }
    </script>
</body>
</html>

php程式碼

<?php
    header('content-type:text/html;charset=utf-8');
    $imginfo = array(
                'onePiece' => array('img/onePiece.jpg','我是要做海賊王的男人！' ),
                'lyh' => array('img/liyanhong.jpg','我是百度背後的男人！'),
                'my' => array('img/mayun.jpg','我是淘寶背後的男人！')
                );

    $key = $_POST['starName'];
    $name = $imginfo[$key];

    $pic = $name[0];
    $text = $name[1];

    echo $pic;
    // 進行分割，方便擷取字串
    echo "|";
    echo $text;

?>

使用ajax傳送post請求（切換圖片）

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

django-Ajax傳送POST請求（csrf跨站請求的三種方式），檔案的上傳

<h3>Ajax上傳檔案</h3> <p><input type="text" name="username" id="username" placeholder="username"></p> <p><input type="

JavaWeb筆記-23-AJAX非同步互動，ajax傳送非同步請求（四步操作）

1）ajax： asynchronous javascript and xml：非同步的js和xml 作用：能使用js非同步訪問伺服器. （原本只是響應伺服器，不能傳送請求）應用場景： 1）百度的搜尋框 2）使用者註冊時（校驗使用者名稱是否被註冊過）

vue使用axios傳送post請求（data為json格式）

安裝axios cnpm install axios 在main.js中新增axios，此處注意axios外掛不同於其他，引用不能使用Vue.use();而是使用Vue.prototype.$axios = axios; import axios from '

傳送post請求（表單的方式）

1 httpClient封裝後使用，get和post方法 Java程式碼 package util; import java.io.BufferedReader; import java.io.InputStream; import java.io

HttpClient傳送Post請求（一）

pom <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactI

iOS開發網路篇—傳送GET和POST請求（使用NSURLSession）

1）該文主要介紹如何使用NSURLSession來發送GET請求和POST請求　　2）本文將不再講解NSURLConnection的使用，如有需要了解NSURLConnection如何傳送請求。　　　　詳細資訊，請參考：http://www.cnblogs.co

AJAX:如何編寫一個關於AJAX的Hello World?(ajax傳送非同步請求（四步操作）)

用到的一個Servlet類： package cn.edu.web.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annot

WiFi-ESP8266入門http（3-1）網頁認證上網-post請求（原教程）

nts 時空 logo 全能 targe work sig html urn 教程：http://geek-workshop.com/thread-37484-1-1.html 源碼：鏈接：https://pan.baidu.com/s/1yuYYqsM-WSOb0Aby

通過ajax傳送post請求向controller傳遞引數後，頁面無法跳轉問題

我的專案之前都是用location.href來向後臺傳遞引數，因為最近在學習ajax，所以將傳值方式改成了ajax傳送post請求，於是問題便接踵而來，我發現在controller中通過返回ModelAndView物件竟然不能實現頁面跳轉了，剛開始百思不得其解，現在總算明白這到底是怎麼一回事了，也想

使用ajax傳送post請求後呼叫servlet成功前臺沒有呼叫success

使用jquery ajax傳送請求後，前臺success方法一直沒有呼叫。經除錯，返回狀態碼200說明請求傳送成功，後臺執行OK，猜測問題應該在前臺解析返回值部分。錯誤示例： function validateName() {var name = $("#nameInputId").

ajax跨域請求（攜帶cookie）springboot

ajax跨域請求（攜帶cookie）一般而言，對於跨域 XMLHttpRequest 或 Fetch 請求，瀏覽器不會發送身份憑證資訊。如果要傳送憑證資訊，需要設定 XMLHttpRequest 的某個特殊標誌位。 <!DOCTYPE h

$.ajax 傳送post請求卻變成get請求

$.ajax 向伺服器傳送一個post請求，開啟開發者工具，發現post請求變成了get請求，怎麼都找不到原因，直到我開啟fiddler 抓包發現了一個返回狀態302的，伺服器，檢測到手機請求，然後自動再路徑前面加上了/m-wap/ ，並且get 請求重定向。。。。

原生javascript實現ajax 傳送post請求

var postData = { "name1": "value1", "name2": "value2"}; postData = (function(obj){ // 轉成po

HttpClient進行POST請求（HTTPS方式）

原文：http://blog.csdn.net/rongyongfeikai2/article/details/41659353 http://blog.csdn.net/lanshengsheng2012/article/details/41483929 異常資

Retrofit2.0的get請求和post請求（入門級）

近期，隨著開發的需要，研究了一下網路請求Retrofit的功能，其實就是對okhttp的封裝，使用起來很方便，主要是以註解的形式進行請求，下面是我看過一些部落格大佬們寫過的常用註解，方法註解，包含@GET、@POST、@PUT、@DELETE、@PATH、

使用fetch代替ajax傳送資料實踐（node+webpack）--whatwg-fetch

安裝whatwg-fetch(和ajax一樣，新的獲取資料方式,支援promise語法)獲取資料。安裝方法： npm install whatwg-fetch --save; or bower install fetch. 匯入依賴。注意這裡的匯

JSON-RPC直接GET、POST請求（POSTMAN測試）

參考：http://blog.csdn.net/csolo/article/details/53583905，記錄備忘注：用封裝的invoke方法的呼叫返回結果是用GET或POST呼叫返回結果的result部分。 GET方法 URL：具體API的URL?method=

jquery中使用ajax傳送post請求返回資料在error中

不知道有沒有人遇到過我這種情況：使用ajax傳送post請求，然後接收到的資料在success中沒有獲取，反而在error中得到了。找了好久找不到原因，各種alert，引數什麼的都對，但是在succe

Scrapy模擬表單和Ajax傳送POST請求

scrapy.FormRequest 普通請求使用scrapy.Request類就可以實現，但是遇到模擬表單或Ajax提交post請求的時候，Request類就不如子類 FormRequest類方便了，因為他自帶 formdata ，專門用來設定表單欄位資料

使用ajax傳送post請求（切換圖片）

相關推薦