$.ajax( type: "POST" POST method to php

Question

I'm trying to use the POST method in jQuery to make a data request. So this is the code in the html page:

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

And this is the php code on the server :

<?php

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

?>

The POST request is not made at all and I have no idea why. The files are in the same folder in the wamp www folder so at least the url isn't wrong.

`return $title;` will not print anything in PHP, you'll need `echo $title;`. — MrCode, Jun 07 '12 at 17:03
Use Firebug or similar to watch to see if any request is made at all — MrCode, Jun 07 '12 at 17:15
Do you actually load jquery before that? If your js works fine and php is installed on the server, with ThiefMaster's changes, it returns data to the page correctly. And yes, use FF with Firebug to see the POST status and result. — AR., Jun 07 '12 at 17:41
jQuery is loaded in the yes. I changed the code as you advised me and installed Firebug so this is the result : Response Headersview source Connection Keep-Alive Content-Length 4 Content-Type text/html Date Thu, 07 Jun 2012 17:58:26 GMT Keep-Alive timeout=5, max=100 Server Apache/2.2.21 (Win64) PHP/5.3.8 X-Powered-By PHP/5.3.8 — user1201915, Jun 07 '12 at 17:59
Request Headersview source Accept */* Accept-Encoding gzip, deflate Accept-Language en-us,en;q=0.5 Cache-Control no-cache Connection keep-alive Content-Length 10 Content-Type application/x-www-form-urlencoded; charset=UTF-8 Host localhost Pragma no-cache Referer http://localhost/homework/Site%20Beta/edit%20panel%20js/edit%20panel.htm User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0 X-Requested-With XMLHttpRequest — user1201915, Jun 07 '12 at 18:01
Do you have PHP installed on your machine **and** set up on your web server? — , Jun 04 '18 at 15:11

score 10 · Accepted Answer · answered Jun 07 '12 at 17:05

10

You need to use data: {title: title} to POST it correctly.

In the PHP code you need to echo the value instead of returning it.

answered Jun 07 '12 at 17:05

ThiefMaster

310,957
84
592
636

Nishu Tayal · Answer 2 · 2012-06-07T17:25:24.403

5

Check whether title has any value or not. If not, then retrive the value using 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>

Try this code.

In php code, use echo instead of return. Only then, javascript data will have its value.

edited Jun 07 '12 at 17:25

answered Jun 07 '12 at 17:15

Nishu Tayal

20,106
8
49
101

Thanks for the code I posted in in the place of the old one, but unfortunately it did't help. – user1201915 Jun 07 '12 at 17:25
I changed it to echo immediately after ThiefMaster replied – user1201915 Jun 07 '12 at 17:30

score 1 · Answer 3 · edited May 02 '19 at 19:30

1

try this

$(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); 
        }
    })
})

in the form the button needs to be type="submit"

edited May 02 '19 at 19:30

Fer García

940
1
14
32

answered May 02 '19 at 18:59

Fnx Code

11
2

score 0 · Answer 4 · answered Jun 07 '12 at 18:12

0

Id advice you to use a bit simplier method -

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

try this one, I just feels its syntax is simplier than the $.ajax's one...

answered Jun 07 '12 at 18:12

manWe

340
2
16

I tried it even before writing to stack overflow. I tried your code, but still no change, thanks though. – user1201915 Jun 07 '12 at 18:17
so what does it do, alerts nothing? Or doesnt alert at all? – manWe Jun 07 '12 at 20:20
Do You use Firebug (in Mozilla) or Chrome to check whether you dont have any syntax mistake? (F12 to check if You dont have a red cross on the bottom right - click on it it'll show you scripts errors) – manWe Jun 08 '12 at 08:43

score 0 · Answer 5 · edited May 15 '21 at 14:09

0

function signIn()
{
    var Username = document.getElementById("Username").value;
    var Password = document.getElementById("Password").value;

    $.ajax({
        type: 'POST',
        url: "auth_loginCode.jsp",
        data: {Username: Username, Password: Password},
        success: function (data) {
            alert(data.trim());
            window.location.reload();
        }
    });
}

edited May 15 '21 at 14:09

Michael Rovinsky

6,807
7
15
30

answered May 15 '21 at 05:08

Shashi Pratap Singh Rajwansi

1

score -1 · Answer 6 · answered May 20 '19 at 12:28

-1

contentType: 'application/x-www-form-urlencoded'

answered May 20 '19 at 12:28

Juergen Schulze

1,515
21
29

3

While this command may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. [How to Answer](https://stackoverflow.com/help/how-to-answer) – Popo May 20 '19 at 14:43

$.ajax( type: "POST" POST method to php

6 Answers6

Linked