如何使用XMLHTTP将变量从JavaScript传递到PHP页面 [英] How to Pass variable from JavaScript to PHP Page using XMLHTTP

查看：80
本文介绍了如何使用XMLHTTP将变量从JavaScript传递到PHP页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在将其标记为重复之前，请阅读说明。



据我所知，将数据从JavaScript传递到PHP的方式是通过Ajax Call。



我的情景是这样的：


  1. 使用PHP，我回显一个带有JavaScript的HTML页面。 

     <？php 
     $ out。='
    < h3>上传新的主要研究< / H3> 
    < div> 
    < p>请选择您想要上传的主要研究：< / p> 
    < table> 
    < form id =file-formaction =method =POST> 
    < Tr>< input type =fileid =file-selectname =userFilemultiple /> 
    < / Tr> 
    < / form> 
    < / form> 
    < button type =submitid =upload-button>上传< / button> ; / table> 
    < / div> 
     
    < h3>查看/编辑主要研究< / h3> 
    < div id =grid1>< / div> 
    < script> 
     
     var form = document.getElementById（file-form）; 
     var fileSelect = document.getElementById（file-select） ; 
     var uploadButton = document.getElementById（upload-button）; 
     var today = new Date（）; 
     var idValue = 1; 
     var jsonData = {
     
     header：[] 
     
    }; 
     
     var data1; 
     
     form.onsubmit = function（event）{
     event.preventDefault（）; 
     
     //更新按钮文本
     uploadButton.innerHTML =正在上传...; 
     
     
     / /从输入中获取所选文件
     var files = fileSelect.files; 
     var file1 = files [0]; 
     
     var i = 1; 
     var reader = new FileReader（）; 
     reader.readAsTex吨（file1的）; 
     reader.onload = function（event）{
     var csv = event.target.result; 
     var data = $ .csv.toArrays（csv）; 
     for（var row in data）{
     if（row == 0）
     continue; 
     else 
     {
     jsonData.header.push（{
     
    ID：idValue，
    RefID：1，
     RefType：data [row] [0]，
    recordDate：new Date（）。toJSON（）。slice（0,10），
    PrimaryAuthors：data [row] [1] ，
    PrimaryTitle：data [row] [2]，
    FullPeriodical：data [row] [3]，
    PeriodicalAbbrev：data [row] [4]，
    PubYear：data [row] [5]，
    PubDate：data [row] [6]，
    Volume：data [row] [7]，
    Issue：data [row] [8]，
    StartPage：data [row] [9]，
    OtherPage：data [row] [10]，
    关键字：data [row] [11]，
    Abstract：data [row] [12]，
    Notes：data [row] [13]，
    PersonalNotes ：data [row] [14]，
    SecondaryAutho rs：data [row] [15]，
    SecondaryTitle：data [row] [16]，
    Edition：data [row] [17]，
    Publisher ：data [row] [18]，
    PlacePub：data [row] [19]，
    TertiaryAuthors：data [row] [20]，
    QuaternaryAuthors [row] [21]，
    QuinaryAuthors：data [row] [22]，
    TertiaryTitle：data [row] [23]，
    ISSN：data [row ] [24]，
    可用性：data [row] [25]，
    Address：data [row] [26]，
    AccNumber：data [row] [ 
    语言：data [row] [28]，
    Classification：data [row] [29]，
    SubFile：data [row] [30] ，
    OrgForiegnTitle：data [row] [31]，
    url：data [row] [32]，
    DOI：data [row] [33]，
    CallNumber：data [row] [34]，
     数据库：data [row] [35]，
    DataSource：data [row] [36]，
    IdentPhrase：data [row] [37]，
    RetDate ：data [row] [38] 
    }）; 
     idValue ++; 
    } 
    } 
     data1 = jsonData; 
     //alert(JSON.stringify(data1））; 
     $（＃grid1）。igGrid（dataSourceObject，data1）; 
     $（＃grid1）。igGrid（dataBind）; 
     
    } 
     
     
     uploadButton.innerHTML =上传完成; 
     
     
     //用JSON数据
     $（document）.ready（grid1（））调用网格; 
     var request; 
    函数createDBRows（）
     {
     var r = confirm（是否要在数据库中创建记录）; 
     
     var url =/_application/model/dataAccess/insertStudies.php?json=; 
     if（r == true）{
     
     alert（You pressed OK！）; 
     //获取Grid的数据库
     var dbSource = $（＃grid1）。igGrid（）。data（）。igGrid.dataSourceObject（）; 
     
     
     
    }其他{
     alert（您按下取消！）; 
    } 
    } 
    < / script> 
    < br> 
    < br> 
     
    < div> 
     
    < button type =submitid =upload-buttononclick =createDBRows（）>创建数据库行< / button> 
     
    <按钮类型=清除id =清除按钮>清除< /按钮> 
    < / div> 
    '; 
     < button type =cancelid =cancel-button>取消< / button> 
     
     
       
              li>上传CSV文件。 
       
    1.  CSV文件中的数据显示在iggrid中。
      2.  
       
    2. 用户修改数据并将其保存在网格中。
      3.  
       
    3. 一旦用户完成修改，用户点击上面的按钮点击创建数据库行按钮
      4.  
       
    4. ，数据源应该传递给另一个PHP页面：insertStudies.php 
      5.

我的问题：



由于我无法创建ajax调用并将数据发送到php页面，所以我停留在2.e点。任何人都可以指向源代码或给出一个例子，它可以解释一种使用JavaScript将一个PHP页面传递到另一个PHP页面的方法。 解决方案

点击按钮运行这个 SCRIPT （进一步通过将3个JS变量分配给 abc.php ）

 < script type =text /的javascript> 
函数sendJSValsToPHP（）{
 var xmlhttp; 
 
 //这些是我要发布的变量来说明例子，你想要什么
 var var_1toPost = 1; 
 var var_2toPost = 2; 
 var var_3toPost = 3; 
 
 if（window.XMLHttpRequest）
 {//代码为IE7 +，Firefox，Chrome，Opera，Safari 
 xmlhttp = new XMLHttpRequest（）; 
} 
 else 
 {//代码为IE6，IE5 
 xmlhttp = new ActiveXObject（Microsoft.XMLHTTP）; 
} 
 xmlhttp.onreadystatechange = function（）
 {
 if（xmlhttp.readyState == 4&& xmlhttp.status == 200）
 {
 //您可以从abc.php文件获取响应文本，并通过JavaScript代码
 document.getElementById（myDiv）处理它所需的任何标签。innerHTML = xmlhttp.responseText; 
 
 
 xmlhttp.open（GET，abc.php？recieve_1 =+ var_1toPost +& recieve_2 =+ var_2toPost +& recieve_3 =+ var_3toPost，true ）; 
 xmlhttp.send（）; 
} 
< / script>

abc.php中的echo'ed数据将出现在 div = myDiv//作为回应。 

 < body> 
< div id =myDivstyle =border：1px solid BLUE; height：100px;> 
在abc.php中回显的内容将出现在这个div中
< / div> 
< button onclick =sendJSValsToPHP（）;>点击我将JS值发送给abc.php< / button> 
< / body>

然后在 abc.php中 //文件

 <？php 
 $ recieved_1 = $ _GET ['recieve_1']; 
 $ recieved_2 = $ _GET ['recieve_2']; 
 $ recieved_3 = $ _GET ['recieve_3']; 
 
 //在这里进行处理并将其插入数据库
 //插入查询或更新查询（不管）
 //插入后您可以获得响应
 //< div>有id =myDiv或者任何你想要的
 //假设你已经成功插入了数据，然后
 $ insertedDataBoolean = true; 
 if（$ insertedDataBoolean）{
 echoData：。 $ recieved_1。 ，。 $ recieved_2。 
和。 $ recieved_3。 插入成功。 
} 
 else {
 echo数据插入错误。; 
} 
？>


Please read the description before marking it as duplicate.

As far as I know, the way to pass data from JavaScript to PHP is through Ajax Call.

My scenario is like this:

  1. Using PHP,I echo an HTML page which has JavaScript. 

    <?php        
$out .= '    
<h3>Upload New Primary Studies</h3>    
<div>    
<p> Please select the primary studies which you want to upload:</p>    
<table>    
<form id="file-form" action="" method="POST">
<Tr><input type="file" id="file-select" name="userFile" multiple/>                 
<button type="submit" id="upload-button"">Upload</button>                 
</Tr>               
</form>      
</table>        
</div>

<h3>View / Edit Primary Studies</h3>
<div id="grid1"></div>
<script>

var form = document.getElementById("file-form");
var fileSelect = document.getElementById("file-select");
var uploadButton = document.getElementById("upload-button");
var today = new Date();
var idValue = 1;      
var jsonData = {

    header: []

};

var data1;

form.onsubmit = function(event) {
  event.preventDefault();

// Update button text.
uploadButton.innerHTML = "Uploading...";


// Get the selected files from the input.
var files = fileSelect.files;
var file1 = files[0];

var i = 1;
var reader = new FileReader();
reader.readAsText(file1);
reader.onload = function(event){
    var csv = event.target.result;
    var data = $.csv.toArrays(csv);
    for(var row in data) {
        if ( row == 0)
            continue;
        else
        {
            jsonData.header.push({

                "ID" : idValue,
                "RefID" : 1,
                "RefType" : data[row][0],
                "recordDate" : new Date().toJSON().slice(0,10),
                "PrimaryAuthors" : data[row][1],
                "PrimaryTitle" : data[row][2],
                "FullPeriodical" : data[row][3],
                "PeriodicalAbbrev" : data[row][4],
                "PubYear" : data[row][5],
                "PubDate" : data[row][6],
                "Volume" : data[row][7],
                "Issue" : data[row][8],
                "StartPage" : data[row][9],
                "OtherPage" : data[row][10],
                "Keywords" : data[row][11],
                "Abstract" : data[row][12],
                "Notes" : data[row][13],
                "PersonalNotes" : data[row][14],
                "SecondaryAuthors" : data[row][15],
                "SecondaryTitle" : data[row][16],
                "Edition" : data[row][17],
                "Publisher" : data[row][18],
                "PlacePub" : data[row][19],
                "TertiaryAuthors" : data[row][20],
                "QuaternaryAuthors" : data[row][21],
                "QuinaryAuthors" : data[row][22],
                "TertiaryTitle" : data[row][23],
                "ISSN" : data[row][24],
                "Availability" : data[row][25],
                "Address" : data[row][26],
                "AccNumber" : data[row][27],
                "Language" : data[row][28],
                "Classification" : data[row][29],
                "SubFile" : data[row][30],
                "OrgForiegnTitle" : data[row][31],
                "url" : data[row][32],
                "DOI" : data[row][33],
                "CallNumber" : data[row][34],
                "Database" : data[row][35],
                "DataSource" : data[row][36],
                "IdentPhrase" : data[row][37],
                "RetDate" : data[row][38]
            });
            idValue++;
        }
    }
        data1 = jsonData;
        //alert(JSON.stringify(data1));
        $("#grid1").igGrid("dataSourceObject", data1);
        $("#grid1").igGrid("dataBind");

    }


    uploadButton.innerHTML = "Upload Complete";
}

// Call the grid with JSON Data
$( document ).ready(grid1());
var request;
function createDBRows()
{
    var r = confirm("Do you want to create records in the database");

    var url = "/_application/model/dataAccess/insertStudies.php?json=";
    if (r == true) {

        alert("You pressed OK!");
        // Get the database of the Grid
        var dbSource = $("#grid1").igGrid().data().igGrid.dataSourceObject();



    } else {
       alert("You pressed Cancel!");
    }
}
</script>
<br>
<br>

<div>

<button type="submit" id="upload-button"" onclick="createDBRows()">Create  Database Rows</button>

<button type="clear" id="clear-button"">Clear</button>    
<button type="cancel" id="cancel-button"">Cancel</button>
</div>
';

  2. Steps for this application are:

    1. Upload a CSV file.
    2. Data from CSV file is displayed in an iggrid.
    3. user modifies the data & saves it on the grid.
    4. Once user is done with modification, user clicks on create DB rows button
    5. on Click of above button, the data source should pass to another PHP page: insertStudies.php

My Problem:

I am stuck at point 2.e as I am not able to create an ajax call and send the data to the php page. Can anyone point to a source or give an example which can explain a way to pass data using javascript with an PHP page to another PHP page.

解决方案

Clicking on the button runs this SCRIPT (which further passes 3 JS-variables to the abc.php)

<script type="text/javascript">
    function sendJSValsToPHP(){
        var xmlhttp;

        //These are the variables i am going to post to illustrate the example, what you want
        var var_1toPost = 1;
        var var_2toPost = 2;
        var var_3toPost = 3;

        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)
            {
                //You can get the response text from abc.php file and process it in any of the tags you want by javascript code
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;              
            }
        }
        xmlhttp.open("GET","abc.php?recieve_1="+var_1toPost+"&recieve_2="+var_2toPost+"&recieve_3="+var_3toPost,true);
        xmlhttp.send();
    }
</script>

The echo'ed data in abc.php will come in the div="myDiv" //as a response.

<body>
    <div id="myDiv" style="border: 1px solid BLUE; height: 100px;">
        the things echo'ed in abc.php will come in this div
    </div>
    <button onclick="sendJSValsToPHP();">Click Me To Send JS-Values to abc.php</button>
</body>

and then in abc.php //file

<?php
    $recieved_1 = $_GET['recieve_1'];
    $recieved_2 = $_GET['recieve_2'];
    $recieved_3 = $_GET['recieve_3'];

    //Do your processing here and insert it in the database
        //Insert Query OR Update Query (whatever)
    // after you have inserted you can get the response in
    // the <div> having id="myDiv" Or whatever you want
    // Suppose you have successfully inserted data then 
    $insertedDataBoolean = true;
    if($insertedDataBoolean){
        echo "Data: " . $recieved_1 . ", " . $recieved_2 . 
        " and " . $recieved_3 . " inserted successfully.";
    }
    else{
        echo "Data-insertion error.";
    }
?>

这篇关于如何使用XMLHTTP将变量从JavaScript传递到PHP页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆