从jQuery调用php函数

时间:2014-11-10 12:48:30

标签: javascript php jquery html

我在saveTestObject()文件中有一个PHP方法,我需要使用HTMLjQuery调用它。我环顾四周,但似乎没有完整的例子。我真的很感激。

这是我的PHP文件,名为SM.php

<?php

switch($_POST["functionname"]){ 

     case 'saveTestObject': 
        saveTestObject();
        break;   
}   

function saveTestObject() {
    echo "saveTestObject CALLED";

    $object = ParseObject::create("TestObject");
    $objectId = $object->getObjectId();
    $php = $object->get("elephant");

    // Set values:
    $object->set("elephant", "phpserver");
    //$object->set("today", new DateTime());
    $object->setArray("mylist", [1, 2, 3]);
    $object->setAssociativeArray(
      "languageTypes", array("php" => "awesome", "ruby" => "wtf")
    );

    $object->save();
}

?>

HTML中的smpage.html表单如下所示:

<form>    
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>    
    <input type="submit"/>
</form>

如何连接这两个,以便当我按下提交按钮时调用saveTestObject()功能?

SM.phpsmpage.html都位于我的网络服务器Documents的保存目录中。

5 个答案:

答案 0 :(得分:6)

您必须对该页面进行AJAX调用。

 $('form input[type=submit]').on('click', function(e) {
    e.preventDefault();
    $.post('SM.php', {fname : $('form input[name=fname]').val(), lname : $('form input[name=lname]').val(), functionname: 'saveTestObject'});
 });

快速说明一下。在这种情况下需要preventDefault,因为它将停止提交事件(重定向浏览器)。

修改:添加了网址。

答案 1 :(得分:3)

您已经对jQuery进行了标记,因此我们使用$.post因为您正在启用$_POST["functionname"]

$("form").submit( function(event) {
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: 'sw.php',
      data: {"functionname": "saveTestObject"},
      success: function(response) { $("#response").html(response); }
    });
});

这将向sw.php发送请求,其帖子数据为functioname = saveTestObject,因此switch案例会调用该函数。

修改

这会使您的HTML文件变得像;

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>    
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>    
    <input type="submit"/>
</form>

<script>
    $("form").submit( function(event) {
        event.preventDefault();
        $.ajax({
          type: "POST",
          url: 'sw.php',
          data: {
                "functionname": "saveTestObject", 
                "fname" : $("form input[name=fname]").val(),
                "lname" : $("form input[name=lname]").val()
          },
          success: function(response) { $("#response").html(response); }
        });
    });
</script>

然后你可以使用;

  • $_POST['functionname']
  • $_POST['fname']
  • $_POST['lname']

success是可选的,但我希望看到AJAX请求的结果。如果您这样做,请在您希望显示结果的位置向您的文件(response)添加ID为<div id="reponse"></div>的div。

答案 2 :(得分:0)

要使用ajax调用该函数,您可以执行以下操作:

$.ajax({
   url: "SM.php", //The requested url
   type:"POST", //The request type, post, get...
   data: {functionname:"saveTestObject"} //The data you want to send to server
});

答案 3 :(得分:0)

$(function(){

  //If you submit the form:
  $("form").submit(function(){

    //post data to your php file
    $.post("SM.php", {functionname: 'saveTestObject'}, function(re){
      alert("Saved. returned" + re);
    });
    return false;
  });

});

答案 4 :(得分:0)

Hi Copy this code and past to 'smpage.html' file run it. 
            <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
            <script type='text/javascript'>
            $("#formid").submit(function(event){
            $fname_val=$("input[name=fname]").val();
            $lname_val=$("input[name=lname]").val();
               $.ajax({
                    url: "SM.php",
                    type: "post",
                    data: {'functionname':'saveTestObject','firstname':$fname_val,'lastname':$lname_val},
                    success : function(data){
                          alert("Data saved successfully !");
                    },
                    error: function(){
                        alert('failed');
                    }
                });

            });
            </script>
            <form id="formid">    
                First name: <input type="text" name="fname"><br>
                Last name: <input type="text" name="lname"><br>    
                <input type="submit"/>
            </form>
            ----------smpage.html---------------------------