web-dev-qa-db-ja.com

$ .ajax（type： "POST" POST method to php

JQueryでPOSTメソッドを使用してデータ要求を作成しようとしています。したがって、これはhtmlページのコードです。

<form>
Title : <input type="text" size="40" name="title"/>
<input type="button" onclick="headingSearch(this.form)" value="Submit"/><br /><br />
</form>
<script type="text/javascript">
function headingSearch(f)
{
    var title=f.title.value;
    $.ajax({
      type: "POST",
      url: "edit.php",
      data: {title:title} ,
      success: function(data) {
        $('.center').html(data); 
      }
    });
}
</script>

そして、これはサーバー上のphpコードです：

<?php

$title = $_POST['title'];
if($title != "")
{
    echo $title;
}

?>

POSTリクエストはまったく行われず、理由はわかりません。ファイルはwamp wwwフォルダー内の同じフォルダーにあるため、少なくともURLは間違っていません。

phpjavascriptjqueryajaxpost
11
user1201915

POSTそれを正しくするためにdata: {title: title}を使用する必要があります。

PHPコードでは、値をechoingするのではなく、returnにする必要があります。

9
ThiefMaster

タイトルに値があるかどうかを確認します。そうでない場合は、Idを使用して値を取得します。

<form>
Title : <input type="text" id="title" size="40" name="title" value = ''/>
<input type="button" onclick="headingSearch(this.form)" value="Submit"/><br /><br />
</form>
<script type="text/javascript">
function headingSearch(f)
{
    var title=jQuery('#title').val();
    $.ajax({
      type: "POST",
      url: "edit.php",
      data: {title:title} ,
      success: function(data) {
    $('.center').html(data); 
}
});
}
</script>

このコードを試してください。

PHPコードでは、returnの代わりにechoを使用します。その場合のみ、javascriptデータに値が設定されます。

3
Nishu Tayal

少し簡単な方法を使用することをお勧めします-

$.post('edit.php', {title: $('input[name="title"]').val() }, function(resp){
    alert(resp);
});

これを試してみてください、その構文は$ .ajaxの構文よりも単純だと感じています...

0
manWe

これを試して

$(document).on("submit", "#form-data", function(e){
    e.preventDefault()
    $.ajax({
        url: "edit.php",
        method: "POST",
        data: new FormData(this),
        contentType: false,
        processData: false,
        success: function(data){
            $('.center').html(data); 
        }
    })
})

フォームでは、ボタンはtype="submit"

0
Fnx Code