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

ajax jquery php chrome jqery ajax

linkhome 2020-05-23 22:54:13 ‧ 3620 瀏覽

分享至

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 }} |

直播中

2 個回答

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>