PG WORKS

PHPやLinux(サーバー)などのノウハウや、便利なツールを紹介していきます。

formのsubmitボタンを押したときにajaxでさらにPOSTしたときの動作について

jQuery HTML

WordPressのプラグインをカスタマイズすることがあり、
どうしてもフックができなくて致し方なく、submitボタンを押したときにajaxで追加でPOSTする処理を入れました。

しかし

PCだと正常に動作するのに、スマホだとエラー(undefinedエラー)になり更新されない現象が判明。

なので、一時的に非同期処理しないようにajax部分に「async:false」を追加すると反映されることが確認できました。

var formData = $('form').serialize();
$.ajax({
	type: "POST",
	dataType:"text",
	url:"sample.php"
	data: formData,
	async: false,
	}).done(function(res){
    });
});

似たようなサンプル作り、同じ現象になるか試したいと思います。

↓↓↓

プログラムのサンプルと結果を追記しました。

テスト結果「ダメなパターン」

index.php

<html>
<head>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
	<form method="POST">
		<input type="text" name="txt" value="">
		<input type="submit" id="testpost" value="POST実行">
	</form>
<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click', '#testpost', function(){
		var formData = $('form').serialize();
		$.ajax({
			type: "POST",
			dataType:"text",
			url:"ajaxpost.php",
			data: formData
		}).done(function(res){
			alert("ok");
		}).fail(function(jqXHR, textStatus, errorThrown){
			alert("ng"+jqXHR.status+':'+textStatus+':'+errorThrown);
		});
	});
});
</script>
</body>
</html>

ajaxpost.php
※テストでファイル作成しただけなので、何も記述しなくても問題ないです。

ajaxpost


「async: false」をなしで、スマホでテストした結果「ng」のほうに飛んでしまいます。

「jqXHR.status」「textStatus」「errorThrown」でエラーを出力してみると、

jqXHR.status=0
textStatus=error
errorThrown=

エラーの詳細が書かれてません。。。

似たようなエラーが出た場合は、「async: false」を追加、または、ajaxだけでPOSTする処理に変更したほうが良いかもしれません。

そもそも、2重POSTする時点でおかしいですが、似たようなエラーに遭遇された方に参考になれば嬉しいです。