Okay, so here's my problem.
I have "page1.php", with following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<textarea id="note-textarea"></textarea>
<script>
$( "#note-textarea" ).keyup( function() {
$( "#output_div" ).html( $( this ).val() );
setTimeout(function () {
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("XMLHTTP");
}
xmlhttp.open("GET", "/upload-note?note="+$('#note-textarea').val(), true);
xmlhttp.send(null);
}, 1000);
});
</script>
</body>
</html>
And "upload-note.php", which should upload the content of the textarea from "page1.php", to a MySQL database. For demonstration-purpose, let's just say, that it's going to echo the content of the textfield instead.
<?php
echo($_GET['note']);
?>
Now this setup works actually just fine, BUT it's ignoring linebreaks. Any suggestions on how to handle these?
The browser ignores linebreaks (\n) in HTML documents. You have to change them with <br> tags like so..
echo nl2br($_GET['note']);
Change to POST instead of GET
xmlhttp.open("POST", "/upload-note", true);
xmlhttp.send("note="+$('#note-textarea').val());
...
echo nl2br($_POST['note']);
Related
So i am trying to send a string into a php file using ajax but the http.send is not working, maybe something is wrong with the code? (i am just a beginner)
mainlink= 'a link';
id= 'an id';
$(document).click(function(){
var http = new XMLHttpRequest();
var link = mainlink+id;
http.open("POST", 'test.php', true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onload = function(){
if(this.status == 200) {
console.log (link);
}
}
http.send("link="+link);
});
test.php:
<?php
if (isset($_POST['link'])){
echo $_POST['link'];
} else{echo "error";}
?>
i tried both GET and POST.
This works. Are you sourcing in jQuery? Paste this tag inside the head tag of your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
It also seems probable that you want to console log this.responseText instead of link so you actually log what the server is responding rather than what you sent. Here is the exact code I used to get this working:
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var mainlink = 'a link';
var id = 'an id';
$(document).click(function(){
var http = new XMLHttpRequest();
var link = mainlink + id;
http.open("POST", 'test.php', true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onload = function(){
if (this.status == 200){
console.log(this.responseText);
}
}
http.send("link=" + link);
});
</script>
</head>
</html>
PHP:
<?php
if(isset($_POST['link'])){
echo $_POST['link'];
}
else{
echo "error";
}
?>
You can see it working live here. Is your pathname correct for test.php?
In my Xampp htdocs file I have placed the html code below, and a php file, test.php, whose contents are also given below. When I click the button I get no error messages and, alas, no indication that the php program has run. Any suggestions ?
I should also add that, using the: form action = "http://localhost/test.php" construct, the test.php does actually execute.
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc() {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = "xxx";
} ;
}
xmlhttp.open("GET", "http://localhost/test.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Using the XMLHttpRequest object</h2>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
<p id="demo"></p>
</body>
The test.php module is just:
<?php
echo "Hello there"
?>
I am currently trying to use a Ajax in netbeans using JavaScript and PHP file. The following code I should click the button and the contents of the php fill should appear but it doesn't. When I use firebug in firefox the response shows the full php file has returned but will not display on webpage. Why???
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script>
function getXMLHttp() {
var xmlHttp
try {
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
//Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!")
return false;
}
}
}
return xmlHttp;
}
function MakeRequest() {
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "ajax.php", true);
xmlHttp.send(null);
}
function HandleResponse(response) {
document.getElementById('ResponseDiv').innerHTML = response;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<input type='button' onclick='MakeRequest();' value='Use AJAX!!!!'/>
<div id='ResponseDiv'>
This is a div to hold the response.
</div>
</body>
</html>
My PHP file is
<?php
echo "This is a php response to your request!!!!!!";
?>
Apart from the fact that HTML code is barely decent, why not use jQuery?
<button id="get" onClick="return false;">jQuery get</button>
<div id="result"></div>
<script type="text/javascript">
$("#get").click(function() {
$.get( "ajax.php", function( data ) {
$( "#result" ).html( data );
});
});
</script>
PHP is server side and is not made to be run on the client side. Your response should come from a URL and not the contents of a file. Ensuring that your response contains on HTML and not PHP should lead you to your solution.
Try replacing your PHP file with
<p>This is a php response to your request!!!!!!</p>
If this enables you to show your content, you have your problem and solution.
Hi I tried to post data from my Text Area to DIV tag. But its not working. Please help me out. Following is my code
<html>
<head>
<script>
function load()
{
var a=document.getElementById('txtarea').value;
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","one.php"+a,true);
xmlhttp.send();
}
</script>
</head>
<body onload="load()">
<textarea id='txtarea'>
default
</textarea>
<div name="myDiv" id="myDiv">
In Div Tag
</div>
</body>
</html>
one.php
<?php
echo "Hello World";
?>
In the above html file i am trying to get the value of one.php and also the text in textarea. But i am unable to get the value in text area.The xmlhttp.open("POST","one.php"+a,true); Here i am doing +a to attach the value of the textarea but it is not being attached,please help with some solution
URL is not properly constructed.
xmlhttp.open("GET",""one.php?YourQueryString="+a,true);
xmlhttp.send();
Although your query doesn't make much sense, but In xmlhttp.open(), you need a proper url to send the request. You can add the textarea value as a query parameter, and then try:
xmlhttp.open("POST","one.php?val="+a,true);
But I don't see your AJAX syntax to be correct
JSON URL : http://en.wikipedia.org/w/api.php?format=json&action=opensearch&search="+str+"&namespace=0&suggest=
Here "str" may be any 2-3 char for an example
str = 'nas'
then JSON URL : http://en.wikipedia.org/w/api.php?format=json&action=opensearch&search=nas&namespace=0&suggest=
I want to grab all result and put these result in a table
I tried AJAX, JSON, JQUERY
Can any one send me working Code for doing this .
My Dummy Code as :-
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
function FillSearchBox(str)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status=200)
{
//Pointer never Comes in this Section (If I Debuug I got xmlhttp.status=0 every time)
var JSONObject = JSON.parse(xmlhttp.responseText);
}
}
var strr= "http://en.wikipedia.org/w/api.php?format=json&action=opensearch&search="+str+"&namespace=0&suggest=";
xmlhttp.open("GET",strr,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" name="wikisearch" id="" onkeyup="FillSearchBox(this.value)" />
</form>
<!-- add Table or Div Here -->
</body>
</html>
You need to use JSONP to make cross-origin requests:
function gotData(d) { alert(d); }
var s = document.createElement('script');
s.src = "http://en.wikipedia.org/w/api.php?format=json&action=opensearch&search="+str+"&namespace=0&callback=gotData";
s.appendTo(document.body);
Note that this is much easier with jQuery.