JQuery Ajax将html数据发布到php并获得回复

我想从类似以下的范围发布数据，但点击时没有任何反应。我在以下范围中发布'4'。我不知道如何发布这个或语法。跨度。JQuery Ajax将html数据发布到php并获得回复

<span style="color:#B00" id="PidClick">4</span>

使用此。

$('#PidClick').click(function() { 
console.log('PidClick event:') 
    $.ajax({ 
    dataType:'json', 
    data: {data:Pid}, 
    type:"POST", 
    url:"test.php" 
    }).done(function(reply){ 
    console.log('reply is' + reply) 
     alert (reply.name) 

}) 
});

和php正在。 ////也是我的'。$ Pid。'可变的权利？我不确定这是否正确。

<?php 
require_once 'db_conx.php'; 
if(isset($_POST["Pid"])) { 
$id = preg_replace ('#[^0-9 ]#i', '', $_POST['Pid']); 
$Result = mysql_query("SELECT * FROM profiles WHERE Pid = '.$Pid.' ") or die (mysql_error()); 
while($row = mysql_fetch_array($Result)){ 
$result = array(); 
$result['pemail'] = $row['pemail']; 
$result['name'] = $row['name']; 
echo json_encode($result); 
} 
} 
mysql_close($con); 
?> 

Console Errors:- 
PidClick event: 'Type error: Type error'

来源

2013-11-04 Relm

首先你必须采取的跨度内的文本。 – Jenz

首先，您需要分配的PID别人一样的值都这么说，一旦我们有一个分配给的Pid的值。由于在PHP文件中，您试图抓取一个名为Pid的变量，因此我们希望将它传递给它。

下面是更新后的JQuery：

jQuery(document).ready(function($) { 
    $('#PidClick').click(function() { 
     var Pid = $(this).text(); 
     $.ajax({ 
      type: 'POST', 
      url: 'test.php', 
      dataType: 'json', 
      data: { 
       Pid: Pid 
      }, 
      success : function(data){ 
       console.log('reply is' + data.reply); 
       alert(data.reply); 
      }, 
      error : function(XMLHttpRequest, textStatus, errorThrown) { 
       alert('There was an error.'); 
      } 
     }); 
    }); 
});

其次，我写了一个小的测试案例PHP文件。只是为了确保一切正常。当你再次传递它们时，你会再次想要确保变量保持不变;在上面的jQuery示例中，您会注意到我使用“data.reply”检索信息，在下面的PHP文件中，我将数据分配给了一个名为“reply”的变量。我还包含了一些安全措施，以确保该文件只能通过ajax请求访问。

<?php 

// only work if requested with ajax 
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
     strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 

    if(isset($_POST['Pid'])) { 
     $return['reply'] = 'The input was '.$_POST['Pid']; 
    } 
    else { 
     $return['reply'] = 'No input detected'; 
    } 

    echo json_encode($return); 

} else { 
    die('direct access is forbidden'); 
} 
?>

下面是我使用的HTML文件：

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>pid example</title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width"> 

     <script src="jquery.js"></script> 
     <script src="ajax.js"></script> 
    </head> 
    <body> 
     <span style="color:#B00" id="PidClick">4</span> 
    </body> 
</html>

此外，请确保您的所有文件的权限和路径试图执行这个例子的时候是正确的。在这种情况下，所有文件应位于同一目录中。

来源

2013-11-04 06:55:08 bmcculley

有些问题我不明白，发布var Pid = $（this）.text（）;使用dataType：'json'，没有发布也没有响应点击，所以我使用dataType：'html'，它的工作原理，但现在我必须得到json数据返回作为PHP的回复，它返回undefined，因为dataType：不是json 。 – Relm

在这种情况下，在一个点击函数'var Pid = $（this）.text（）;'中为'Pid'赋值'4'，然后将其传递给php脚本并用于mysql查询。你需要对返回的json结果进行排序来检索所需的变量。我将把我的HTML文件添加到上面的答案中，以便您看到我嘲笑的完整工作示例。 – bmcculley

好的，你已经接受了你的回答。 1为积极大声笑 – Relm

用户.html()得到内部HTML

所以加$('#PidClick').html();

$('#PidClick').click(function() { 
    var Pid = $('#PidClick').html(); 
    Pid = parseInt(Pid); 
    $.ajax({ 
data: 'Pid='+Pid, 
type:"POST", 
url:"test.php" 
}).done(function(reply){ 
console.log('reply is' + reply) 
    alert (reply.name) 

}) 
});

来源

2013-11-04 06:14:24

data：{data：Pid}没有被发布，我无法获得答复，如果我在php中回声的东西，但如果我回声$数据它什么都没有返回。 – Relm

我已经更新了我的答案。现在试试。 –

使用$('#PidClick').text()或$('#PidClick').html()为获得跨度的内部文本。

$('#PidClick').click(function() { 
    var Pid = $('#PidClick').html(); 
    .............. 
});

来源

2013-11-04 06:16:20 Jenz

您可以指定PID值，

var Pid = $(this).html();

来源

2013-11-04 06:16:34

$('#PidClick').click(function() { 
    var Pid = $('#PidClick').text(); 
    $.ajax({ 
     dataType:'json', 
     data: 'Pid='+Pid, 
     type:"POST", 
     url:"test.php" 
    }).done(function(reply){ 
    console.log('reply is' + reply) 
    alert (reply.name) 
    }) 
});

js fiddler example

来源

2013-11-04 06:59:15

JQuery Ajax将html数据发布到php并获得回复

回答

相关问题