Пожалуйста, прочитайте описание перед тем, как пометить его как дубликат.
Насколько я знаю, способ передачи данных с JavaScript на PHP осуществляется через Ajax Call.
Мой сценарий выглядит так:
Используя PHP, я повторяю HTML-страницу с 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.e, так как я не могу создать вызов ajax и отправить данные на php-страницу. Может ли кто-нибудь указать на источник или дать пример, который может объяснить способ передачи данных с помощью javascript с PHP-страницей на другую страницу PHP.
То, о чем вы просите, это метод Ajax Post .
Вы можете отправить свои данные на php-страницу через json-массив или создать сериализацию формы.
Функция возвращает данные «эхом» со страницы php в тег с классом результата
$.post("path/yourPhpPage.php",{key: 'value'}, function( data ) { $( ".result" ).html( data ); });
Нажатие на кнопку запускает этот SCRIPT (который далее передает 3 JS-переменные в 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>
Данные echo'ed в abc.php войдут в 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>
а затем в файле abc.php //
<?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."; } ?>