jQueryのajaxでpostされたデータをphpで受け取る方法

Question

やりたいこと

ajaxの勉強をしています。以下のコードで、class="test"の要素をクリックしたら、class="result"の部分に「東京都山田」と表示させたいです。

//HTML
<div class="test">押す</div>
<div class="result"></div>

//jQuery
$('#body').on('click','.test',function(){
	$.ajax({
		url: 'sample.php',
		type: 'POST',
		data: {'address':'東京都','name':'山田'},
		cache: false,
		contentType: false,
		processData: false,
		dataType: 'html'
	})
	.done( (data) => {
		$('.result').html(data);
	})
	.fail( (data) => {
	})
	.always( (data) => {
	});
});

// sample.php
header('Content-type: text/plain; charset= UTF-8');
echo $_POST['address'].$_POST['name'];

困っていること

class="test"の要素をクリックしたら、class="result"の部分に「東京都山田」と表示させたいのですが、
$_POST['address']も$_POST['name']もUndefined indexとなってしまいます。

ajaxの入門サイトをずっと見ているのですが、よくわからず質問いたしました。

もしお分かりになる方がいらっしゃいましたら、ご教授頂けましたら幸いです。
何卒よろしくお願いいたします。

Answer 1

contentType: false,
processData: false,
をしてする場合はformdataを想定しています

Comments

[yambejp]

var fd=new FormData();
fd.append('address','東京都');
fd.append('name','山田');
としておいて$.ajaxの中で
data:fd,
としてください

[yayak]

ご教授いただいた知識で無事に解決することができました。
contentType: false,
processData: false,
はformdataを想定しているものだったのですね。。
コピペをつなぎ合わせてウンウン唸って考え込んでいたせいで気づけませんでした、本当に有難うございます。助かりました。