iT邦幫忙

0

Chrome 83版 jquery form ajax 回應失效問題

  • 分享至 

  • xImage

Chrome更新83版 透過jquery form 上傳檔案
後端PHP有成功接收到值 但是php echo JSON 傳回去前端
Ajax success:function(data){ console.log(data) }
Chrome 印出來值是null....
其他瀏覽器像IE火狐都正常 只有Chrome 83 最新版出問題
想不出解決辦法....

使用這兩個js
jquery-1.4.4.js
jquery.form.js

Resopnse Header
HTTP/1.1 200 OK
Date: Sat, 23 May 2020 15:42:50 GMT
Server: Apache
X-Powered-By: PHP/5.4.17
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 93
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

Request Header
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-TW,zh;q=0.9
Cache-Control: max-age=0
Connection: keep-alive
Content-Length: 37173
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryyd1EZeq6sjGtUHEb
Cookie: _ga=GA1.3.1070034965.1590047294; _fbp=fb.2.1590047294346.1702687666; PHPSESSID=3ne5crjebv3tljsg8bmfmljeg3
Host: xxx
Origin: xxx
Referer: xxx
Sec-Fetch-Dest: iframe
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
dragonH
iT邦超人 5 級 ‧ 2020-05-24 01:04:09

jquery form FAQ

What versions of jQuery is the Form Plugin compatible with?

The Form Plugin is compatible with jQuery v1.5 and later.

所以你可能需要提高 jquery 的版本

你的 console 應該會有錯誤才對

參考

以下 code 實測過可以正常運行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div class = "container-fulid">
        <div class = "row mt-3">
            <div class = "col-md-8 offset-md-2">
                <form id = "myForm" method = "POST" action = "./backend.php">
                    <div class = "row mt-3">
                        <div class = "col-md-12">
                            <label>Name: </label>
                            <input type = "file" class = "form-control" id = "myFile" name = "myFile"/>
                        </div>
                    </div>
                    <div class = "row mt-3">
                        <div class = "col-md-12">
                            <button type = "button" class = "btn btn-block btn-outline-success" id = "submitBtn">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div id = "output1"/>
    </div>
</body>
<script>
const showResponse = (responseText, statusText, xhr, $form) => {
    console.log(responseText);
}
const options = { 
    target:        '#output1',   // target element(s) to be updated with server response 
    success:       showResponse  // post-submit callback 
};
$(document).ready(() => {
    $('#myForm').ajaxForm(options);
    $('#submitBtn').click(submitForm);
})

const submitForm = () => {
    $('#myForm').ajaxSubmit(options);
};
</script>
</html>
fillano iT邦超人 1 級 ‧ 2020-05-25 09:01:20 檢舉

找了一下,發現1.4.4是2020年11月11日發佈的XD

dragonH iT邦超人 5 級 ‧ 2020-05-25 09:43:15 檢舉

應該是 fix & improve 啦XD

不包含後面版本的功能

0
koparedes
iT邦見習生 ‧ 2020-05-26 17:08:42

我也碰到相似的問題,不過我的狀況是jquery form plugin 和 chrome 83 不相容,我把用jquery form 的部分改成用jquery 自己的$.ajax() 方法就解決了。 另外也是建議你升級一下jquery吧。

我要發表回答

立即登入回答