Ajax JQuery and PHP Tutorial Step by Step

Rumman Ansari   2020-02-20   Student   Web Development > PHP-Ajax-JQuery   726 Share

Example 1:

Syntax: How to take input from input box to jquey 

<span class="pln">


</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">Document</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"//code.jquery.com/jquery-1.11.2.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">


</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"container"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6 col-xs-offset-3"</span><span class="tag">&gt;</span><span class="pln"> 
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;h2&gt;</span><span class="pln">Search Our Database</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'form-control'</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">'search'</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">'search'</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">'Search our inventory'</span><span class="tag">&gt;</span><span class="pln">
 
      </span><span class="tag">&lt;br&gt;</span><span class="pln">
      </span><span class="tag">&lt;br&gt;</span><span class="pln">
      </span><span class="tag">&lt;h2</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bg-success"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"result"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/h2&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
 

 </span><span class="tag">&lt;script&gt;</span><span class="pln">
     
   $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> 
    $</span><span class="pun">(</span><span class="str">'#search'</span><span class="pun">).</span><span class="pln">keyup</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
     
     </span><span class="kwd">var</span><span class="pln"> search </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#search'</span><span class="pun">).</span><span class="pln">val</span><span class="pun">();</span><span class="pln">
     alert</span><span class="pun">(</span><span class="pln">search</span><span class="pun">);</span><span class="pln">  
   </span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
 
 </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">
</span>

Example 2:

Syntax: HTML and Ajax Code: index.php 

<span class="pln">

</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">Document</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"//code.jquery.com/jquery-1.11.2.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">


</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"container"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6 col-xs-offset-3"</span><span class="tag">&gt;</span><span class="pln"> 
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;h2&gt;</span><span class="pln">Search Our Database</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'form-control'</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">'search'</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">'search'</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">'Search our inventory'</span><span class="tag">&gt;</span><span class="pln">
 
      </span><span class="tag">&lt;br&gt;</span><span class="pln">
      </span><span class="tag">&lt;br&gt;</span><span class="pln">
      </span><span class="tag">&lt;h2</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bg-success"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"result"</span><span class="tag">&gt;</span><span class="pln">hfgh </span><span class="tag">&lt;/h2&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
 

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">

 </span><span class="tag">&lt;script&gt;</span><span class="pln">
     
   $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> 
    $</span><span class="pun">(</span><span class="str">'#search'</span><span class="pun">).</span><span class="pln">keyup</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
     
     </span><span class="kwd">var</span><span class="pln"> search </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#search'</span><span class="pun">).</span><span class="pln">val</span><span class="pun">();</span><span class="pln">
      </span><span class="com">// alert(search);  </span><span class="pln">

      $</span><span class="pun">.</span><span class="pln">ajax</span><span class="pun">({</span><span class="pln">
        url</span><span class="pun">:</span><span class="pln"> </span><span class="str">'search.php'</span><span class="pun">,</span><span class="pln">
        data</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">search</span><span class="pun">:</span><span class="pln"> search</span><span class="pun">},</span><span class="pln">
        type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'POST'</span><span class="pun">,</span><span class="pln">
        success</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">){</span><span class="pln">
            </span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">data</span><span class="pun">.</span><span class="pln">error</span><span class="pun">){</span><span class="pln">
                $</span><span class="pun">(</span><span class="str">'#result'</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">


      </span><span class="pun">});</span><span class="pln">
   </span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
 
 </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  


</span>

Syntax: PHP Code search.php 

<span class="pln">

</span><span class="pun">&lt;?</span><span class="pln">php

$search </span><span class="pun">=</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">'search'</span><span class="pun">];</span><span class="pln">

echo $search </span><span class="pun">;</span><span class="pln">

</span><span class="pun">?&gt;</span><span class="pln">

</span>

Example 3: Search from database

Table:

Syntax: It contains HTML and Ajax code index.html 

<span class="pln">

</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">Document</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"//code.jquery.com/jquery-1.11.2.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">


</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"container"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6 col-xs-offset-3"</span><span class="tag">&gt;</span><span class="pln"> 
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;h2&gt;</span><span class="pln">Search in Database</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'form-control'</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">'search'</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">'search'</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">'Search our inventory'</span><span class="tag">&gt;</span><span class="pln">
 
      </span><span class="tag">&lt;br&gt;</span><span class="pln">
      </span><span class="tag">&lt;br&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"result"</span><span class="tag">&gt;</span><span class="pln">  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
 

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">

 </span><span class="tag">&lt;script&gt;</span><span class="pln">
     
   $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> 
    $</span><span class="pun">(</span><span class="str">'#search'</span><span class="pun">).</span><span class="pln">keyup</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
     
     </span><span class="kwd">var</span><span class="pln"> search </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#search'</span><span class="pun">).</span><span class="pln">val</span><span class="pun">();</span><span class="pln">
      </span><span class="com">// alert(search);  </span><span class="pln">

      $</span><span class="pun">.</span><span class="pln">ajax</span><span class="pun">({</span><span class="pln">
        url</span><span class="pun">:</span><span class="pln"> </span><span class="str">'search.php'</span><span class="pun">,</span><span class="pln">
        data</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">search</span><span class="pun">:</span><span class="pln"> search</span><span class="pun">},</span><span class="pln">
        type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'POST'</span><span class="pun">,</span><span class="pln">
        success</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">){</span><span class="pln">
            </span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">data</span><span class="pun">.</span><span class="pln">error</span><span class="pun">){</span><span class="pln">
                $</span><span class="pun">(</span><span class="str">'#result'</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">


      </span><span class="pun">});</span><span class="pln">
   </span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
 
 </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  

</span>

Syntax: PHP code search.php

<span class="pln">

</span><span class="pun">&lt;?</span><span class="pln">php

$connection </span><span class="pun">=</span><span class="pln"> mysqli_connect</span><span class="pun">(</span><span class="str">'localhost'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'root'</span><span class="pun">,</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="str">'atnyla'</span><span class="pun">);</span><span class="pln">

$search </span><span class="pun">=</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">'search'</span><span class="pun">];</span><span class="pln">


</span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">empty</span><span class="pun">(</span><span class="pln">$search</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

$query </span><span class="pun">=</span><span class="pln"> </span><span class="str">"SELECT * FROM usr WHERE name LIKE '$search%' "</span><span class="pun">;</span><span class="pln">
$search_query </span><span class="pun">=</span><span class="pln"> mysqli_query</span><span class="pun">(</span><span class="pln">$connection</span><span class="pun">,</span><span class="pln">$query</span><span class="pun">);</span><span class="pln">
$count </span><span class="pun">=</span><span class="pln"> mysqli_num_rows</span><span class="pun">(</span><span class="pln">$search_query</span><span class="pun">);</span><span class="pln">    

    
   </span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">$search_query</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
   
   </span><span class="kwd">die</span><span class="pun">(</span><span class="str">'QUERY FAILED'</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> mysqli_error</span><span class="pun">(</span><span class="pln">$connection</span><span class="pun">));</span><span class="pln">
   
   
   </span><span class="pun">}</span><span class="pln">
    
    
    
    </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">$count </span><span class="pun">&lt;=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    
     echo </span><span class="str">"Sorry we don't have that car available"</span><span class="pun">;</span><span class="pln">
   
    
    </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    
    
    
     </span><span class="kwd">while</span><span class="pun">(</span><span class="pln">$row </span><span class="pun">=</span><span class="pln"> mysqli_fetch_array</span><span class="pun">(</span><span class="pln">$search_query</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    
        $name </span><span class="pun">=</span><span class="pln"> $row</span><span class="pun">[</span><span class="str">'name'</span><span class="pun">];</span><span class="pln">
        
        </span><span class="pun">?&gt;</span><span class="pln">
        
        </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'list-unstyled'</span><span class="tag">&gt;</span><span class="pln">
            
        </span><span class="pun">&lt;?</span><span class="pln">php
            
            echo </span><span class="str">"&lt;li&gt;{$name} -  present in database&lt;/li&gt;"</span><span class="pun">;</span><span class="pln"> 
            
          </span><span class="pun">?&gt;</span><span class="pln">  
        </span><span class="tag">&lt;/ul&gt;</span><span class="pln"> 
    
    
  </span><span class="pun">&lt;?</span><span class="pln">php  </span><span class="pun">}</span><span class="pln"> 
    
    </span><span class="pun">}</span><span class="pln">  
</span><span class="pun">}</span><span class="pln">  

</span><span class="pun">?&gt;</span><span class="pln">

 

</span>
Share this Post: