Fatal编程技术网
  • javascript/
  • Javascript 如何发出一个简单的AJAX请求来执行php？

Javascript 如何发出一个简单的AJAX请求来执行php？

javascript php jquery sql ajax

Javascript 如何发出一个简单的AJAX请求来执行php？,javascript,php,jquery,sql,ajax,Javascript,Php,Jquery,Sql,Ajax,嘿，伙计们，这是一个特定于我在我的网站上尝试做什么的问题，我找不到答案，所以我想我会提出我自己的问题 我想做的是： 当我按下网站上的按钮时，它会执行一个javascript函数。在这个JS函数中，我创建了一个数组。这个数组的顺序是AJAX请求功能的关键，因为整个要点是能够根据您的喜好对数组进行重新排序 此数组的内容表示mySQL行 我希望能够在按下按钮时执行一个php函数，该函数将获取这个数组，并将值设置为我的表的“Order”列。ie：数组的第一个元素将其“order”值设置为1。数组的最后一

嘿，伙计们，这是一个特定于我在我的网站上尝试做什么的问题，我找不到答案，所以我想我会提出我自己的问题

我想做的是：

当我按下网站上的按钮时，它会执行一个javascript函数。在这个JS函数中，我创建了一个数组。这个数组的顺序是AJAX请求功能的关键，因为整个要点是能够根据您的喜好对数组进行重新排序

此数组的内容表示mySQL行

我希望能够在按下按钮时执行一个php函数，该函数将获取这个数组，并将值设置为我的表的“Order”列。ie：数组的第一个元素将其“order”值设置为1。数组的最后一个元素将其“order”值设置为N（不管有多少）

以下是我当前的javascript：

<script>
  $(document).ready(function(){
    $( "#sortable" ).sortable({axis:"y"});
    $("button").click(function(){
     var sortedIDs = $( "#sortable" ).sortable("toArray");
      var num = sortedIDs[0];
    alert(num);
    $.post({
    url:"ajax2.php",

    });

  });
});
</script>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
// JavaScript Document

function xmlHttp()
{
    this.strHTML;
    this.objXML;
    this.postReturn = function(post, page){
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                this.strHTML = xmlhttp.responseText;
                this.objXML = xmlhttp.responseXML;
                pageReturn(this.strHTML, this.objXML);
            }
        }
        xmlhttp.open("POST",page,false);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(post);
    }
}

function pageReturn(strHTML, objXML){
    alert(strHTML);
}

function sampleSend(){
    var strPost="";

    //dont forget to encodeURIComponent() when you use this for production
    for(var i=0;i<10;i++){
        strPost += (!strPost)?"blah"+i+"=value"+i:"&blah"+i+"=value"+i;
    }
    var xmlhttp = new xmlHttp();
    xmlhttp.postReturn(strPost, "test.php");
}
</script>
</head>

<body>
<div onclick="sampleSend()">clickMe</div>
</body>
</html>


$（文档）.ready（函数（）{
$（“#可排序”）.sortable（{axis:y}）；
$（“按钮”）。单击（函数（）{
var sortedis=$（“#可排序”）。可排序（“toArray”）；
var num=sortedIDs[0]；
警报（num）；
美元邮政({
url:“ajax2.php”，
});
});
});
以下是我的ajax2.php页面的外观：

<?php
include 'connect.php';
  $sql = "UPDATE categories
      SET cat_order=1
      WHERE cat_id=5;";

$result = mysql_query($sql);

?>
我只是输入数字来测试功能。最后，我希望能够使用javascript数组“sortedID”中的信息集

为了更清楚地说明我想做什么…我正在创建一个网络论坛，我想改变我的论坛类别在主页上的顺序。为了做到这一点，我创建了一个“可排序”的jquery ui界面。当你按下这个界面上的按钮时，它会执行我发布的js函数。它知道类别列表的顺序。更改后，它会知道顺序。

这可能有点老套，但我喜欢使用自己的xmlHTTP请求，而不是jQuery提供的请求。这是一个我认为可以帮助你解决问题的例子

HTML和Javascript：

<script>
  $(document).ready(function(){
    $( "#sortable" ).sortable({axis:"y"});
    $("button").click(function(){
     var sortedIDs = $( "#sortable" ).sortable("toArray");
      var num = sortedIDs[0];
    alert(num);
    $.post({
    url:"ajax2.php",

    });

  });
});
</script>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
// JavaScript Document

function xmlHttp()
{
    this.strHTML;
    this.objXML;
    this.postReturn = function(post, page){
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                this.strHTML = xmlhttp.responseText;
                this.objXML = xmlhttp.responseXML;
                pageReturn(this.strHTML, this.objXML);
            }
        }
        xmlhttp.open("POST",page,false);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(post);
    }
}

function pageReturn(strHTML, objXML){
    alert(strHTML);
}

function sampleSend(){
    var strPost="";

    //dont forget to encodeURIComponent() when you use this for production
    for(var i=0;i<10;i++){
        strPost += (!strPost)?"blah"+i+"=value"+i:"&blah"+i+"=value"+i;
    }
    var xmlhttp = new xmlHttp();
    xmlhttp.postReturn(strPost, "test.php");
}
</script>
</head>

<body>
<div onclick="sampleSend()">clickMe</div>
</body>
</html>
希望这有帮助

下面是一个基于jquery的ajax代码示例

$.ajax({
        url     :   "path_to_ajax2.php",
        type    :   "POST",
        data    :   ({sorted_ids:num}),
        success :   function(data){

            //show the sorted array here.
        }
    });
如果您的更新在ajax2.php上成功，则不要忘记回显一些内容，这将返回对ajax调用函数的控制。

我认为您应该在重新排序类别时刷新页面。@dcclassics我不知道您的意思？我仍然需要发送一个sql查询。我认为在javascript函数中实现这一点的唯一方法是ajax？这是正确的。我建议用PHP而不是Javascript来执行该操作，但这会剥夺功能。我仍然在我的ajax2.php页面中使用php。Php不是客户端，所以如果我只使用Php，它将无法识别何时在我的jquery ui界面中进行了更改，对吗？